4 0

スクロールすると、ふんわり表示されるアレ。
今では多くのサイトで見かけるようになりましたし、仕事上でも、「ふんわり表示されるやつを実装してほしい」とよく言われます。
最近制作担当したサイトでは、数件連続でふんわり実装依頼があったので、やはり流行ってるのですね。

昨今は、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」。
ライセンスがよく分からないw MITライセンスらしいのだけど。
こちらはちょっと分かりにくいかもなので、以下に動画も。

  

Locomotive Scroll

おしゃれなぬるぬる「Locomotive Scroll」商用利用もOK。
一部スマホに対応してない機能もあるようですが、なめらかな動きが特徴で多機能ですね。
https://github.com/locomotivemtl/locomotive-scroll/blob/master/LICENSE

  

他にも色々とあるかと思いますが、
ふんわりしたいだけなら多機能である必要はないので軽量なものがよいかもですね。

他には・・

ライブラリというわけではないのですが、
検索すると、けっこう多数のエンジニアさんなどが
自前で書かれてあるコードが出てきますね。
 
個人的には、こちらがおすすめかなと思います。
http://noze.space/archives/415
個人の方だと思うので、ライセンスは分からないのですけど💦

YouTubeにも、スクロールしたらふわっと講座がありました😊

移り変わりが激しいweb業界ですが、
ふんわりの流行はいつまでつづくのでしょう!?
そして、次なる流行は・・・!?


Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %