スクロールに合わせてアニメーションが付けられるjqueryプラグイン「AOS」
スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。
AOSの特徴
- 「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションが設定出来る
- アニメーションの開始位置と方向(上から下、左から右など)が指定出来る
- 多くのイージングが指定可能
- 他にも「offset」「delay」「duration」「once」などのオプション設定が可能
まずは基本形を作成してみましょう。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>AOSを実装してみる</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/aos.css"> </head> <body> <div class="container"> <header> </header> <div class="box-inner" data-aos="fade-up"> コンテンツ </div><!--/.box-inner--> <div class="box-inner" data-aos="flip-left"> コンテンツ </div><!--/.box-inner--> <div class="box-inner" data-aos="slide-up"> コンテンツ </div><!--/.box-inner--> <div class="box-inner" data-aos="zoom-in-down"> コンテンツ </div><!--/.box-inner--> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/aos.js"></script> <script> AOS.init(); </script> </body> </html>
オプションの設定
オプションの設定も個別の場合は各要素に各data-aos属性を指定、全て同じであればjsの方で一括で指定出来ます。
<div data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-once="false" data-aos-anchor-placement="top-center" > </div>
jsで一括指定の場合
<script> AOS.init({ once: true }); </script>
サンプル
https://codepen.io/yachin29/full/VweZYNz
さらにclip-pathプロパティを使って斜線の要素を作ってみましょう。
https://plusgraph-ca.jp/plusgraph-ca.jp
スクロールダウンボタン
スクロールボタンとはファーストビューで大きめのイメージやムービーなどを配置しているサイトで設置されていることが多い、次のコンテンツがあることを示したりスクロールするよう促すアイコンやボタンの事です。