DAY20:スクロールに応じて要素を「フワッ」と登場させる

スクロールに応じて要素が「フワッ」と登場させるアニメーションもWebサイトで好まれがちな動きです。今回はこの動きを実装してもらいます。

課題:スクロールに応じて要素を「フワッ」と登場させる

DAY11あたりまでに作成したサイトの各要素に対して、スクロールでの登場にあわせて「フワッと」表示されるように動きを加えてください

※「フワッと」じゃなくても、横からスライドで表示など好きなように作っていただいても構いません。これはやりすぎですが、、、笑

フワッとした動きは上のGif動画だと真ん中下のカードですね…

おそらく次に紹介する「wow」というライブラリを使うのが一番楽だと思います。

スクロールに応じたアニメーションができるライブラリ

わたしが好んで使っているのは「Wow」というライブラリです。

スクロールの登場に合わせてアニメーションさせる決定版!「wow」の紹介

その他には、「inview」というライブラリを使う方法もあります。こっちの方が難し目…
jQuery – inview.js で画面に表示されたタイミングでアニメーションを開始する | Gimmick log

また、ライブラリを使わずとも「要素をふわっと表示」とかで検索すると色々と自作する方法が出てくるかと思います。わたしは自作したことないですが、作り方を理解しておくと対応できる幅も広がっていくかもしれません。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事