アニメーションの動きを確認できるデモページです。
実際のサイトで使うイメージが分かりやすいように、サンプルボックスだけでなく記事カードでも動きを確認できるようにしています。
また、一度画面外に出ても繰り返しアニメーション再生しています。
スクロールしながら、
- どの動きが自然に見えるか
- どのアニメーションが自分のサイトに合いそうか
を、実際に体感してみてください。
ページ最後までゆっくりスクロールしてみてくださいね。
フェードイン
＼ ふわっ ／
フェードイン
下からフェードイン
＼ ふわっ ／
下からフェードイン
右からスライドイン
＼ しゅっ ／
左からスライドイン
＼ しゅっ ／
拡大して表示
＼ ぽわっ ／
拡大して表示
どの動きも、クラスを付けるだけで使えるように整理しています。
「まずはそのまま動かしてみたい」という方は、記事内の実装コードを参考にしてみてください。