webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

スクロールに合わせてアニメーションが付けられるjqueryプラグイン「AOS」

スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。

michalsnik.github.io



f:id:yachin29:20200118113542j:plain


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


www.taguchi.co.jp


スクロールダウンボタン

スクロールボタンとはファーストビューで大きめのイメージやムービーなどを配置しているサイトで設置されていることが多い、次のコンテンツがあることを示したりスクロールするよう促すアイコンやボタンの事です。


https://www.nxworld.net/tips/css-scroll-down-button.html