javascriptライブラリ「aos.js」を使ったスクロールアニメーションです。
ページをスクロールすると、フェイドインで下から上へアニメーション表示されるアレです。
表示される前は空白で表示されるため、コンテンツをアニメーションして表示することで、誘目性が強くなり、また印象・イメージもコントロールしやすくなります。
スクロールと連動してコンテンツが動いて現れるので、動く場所や方向・速度など、ページ全体である程度統一感を持たさないと、安っぽい印象を与えかねません。
ただ、全部同じ動き・方向だと単調すぎて飽きさせる原因にもなるので、適度な抑揚・リズム感も必要になります。
スクロールと連動して動きながら現れるので、そのページのコンテンツやトピックの「登場シーン」と捉えると、効果的な使い方も見えてくるのではないでしょうか。
スクロールアニメーションのデモ
See the Pen 18-3-3 by Rayout-gw (@Rayout-gw) on CodePen.
デモページでスクロールアニメーションを作成し、仕組みを理解していきましょう。
必要なタグの属性や、アニメーション表示できるのを確認してから、猫カフェのページなどでも同じようにチャレンジしてみましょう。
作成手順
chap18
animation-demo（フォルダを作成）
demo.html（デモページを作成）
動画では猫カフェでアニメーションを作成してましたが、ここではデモページを作成します。
ページ内のコンテンツはアレンジしてください。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>aos.jsはjavascriptライブラリで、jQueryではありません
オフラインでも表示するには、各ファイルをDLする必要があります。
</body>の１行上あたりに記述します。
<script>
AOS.init();
</script>公式サイトで、アニメーションの種類とその属性を確認できるので見ておきましょう。
発火のタイミングには、data-aos-anchor-placement属性で設定できます。
<div data-aos="fade-up" data-aos-anchor-placement="top-bottom">
</div>| top-bottom | タグの上部が画面の下部まで来たら発火 |
| top-center | タグの上部が画面の中央まで来たら発火 |
| top-top | タグの上部が画面の上部まで来たら発火 |
| center-bottom | タグの中央部が画面の下部に来たら発火 |
| center-center | タグの中央部が画面の中央に来たら発火 |
| center-top | タグの中央部が画面の上部に来たら発火 |
| bottom-bottom | タグの下部が画面の下部に来たら発火 |
| bottom-center | タグの下部が画面の中央に来たら発火 |
| bottom-top | タグの下部が画面の上部に来たら発火 |
左の図は、ブラウザの画面とタグの位置関係です。
右上のタグの位置で表示するには、発火するタイミングをcenter-centerに設定し、左上のタグの場合はtop-centerが発火のタイミングになります。
左上と右上のボックスが横一列に並んでいた場合、このタイミングで設定すると、左→右の順で表示させることができます。
See the Pen 18-3-4 by Rayout-gw (@Rayout-gw) on CodePen.