【JavaScript】スクロールに合わせてふんわり表示
スクロールすると、ふんわり表示されるアレ。
今では多くのサイトで見かけるようになりましたし、仕事上でも、「ふんわり表示されるやつを実装してほしい」とのご要望もよくあります。
最近制作担当したサイトでは、数件連続でふんわり実装依頼があったので、やはり流行ってるのですね。
昨今は、jQueryを使わない生のJavaScriptが好まれる傾向にあると思うので
JavaScriptのみでのライブラリをご紹介。
ScrollReveal
有名どころの「ScrollReveal.js」というライブラリですが
こちらは商用利用が有料となっています。
アニメーション演出等も一体になっているので手軽だけどバリエーションが限られるかな。
https://scrollrevealjs.org/pricing/
sal
商用利用もOKなのが、「sal.js」ライブラリですね。
なによりとても軽量なのがよい。私はこれが好きです。
https://github.com/mciastek/sal/blob/master/LICENSE
AOS
こちら「AOS」も商用利用OKなライブラリ。
https://github.com/michalsnik/aos/blob/next/LICENSE
ScrollOut
オープンソースライブラリ「ScrollOut」。
ライセンスがよく分からないｗ MITライセンスらしいのだけど。
こちらはちょっと分かりにくいかもなので、以下に動画も。
Locomotive Scroll
おしゃれなぬるぬる「Locomotive Scroll」商用利用もOK。
一部スマホに対応してない機能もあるようですが、なめらかな動きが特徴で多機能ですね。
https://github.com/locomotivemtl/locomotive-scroll/blob/master/LICENSE
他にも色々とあるかと思いますが、
ふんわりしたいだけなら多機能である必要はないので軽量なものがよいかもですね。
他には・・
ライブラリというわけではないのですが、
検索すると、けっこう多数のエンジニアさんなどが
自前で書かれてあるコードが出てきますね。
個人的には、こちらがおすすめかなと思います。
http://noze.space/archives/415
個人の方だと思うので、ライセンスは分からないのですけど💦
YouTubeにも、スクロールしたらふわっと講座がありました😊
移り変わりが激しいweb業界ですが、
ふんわりの流行はいつまでつづくのでしょう！？
そして、次なる流行は・・・！？