Single Post
jQuery不要で簡単にフェイドインを実装
スクロールダウンして発火ポイントに入るとコンテンツや画像をふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションエフェクトを実装してくれる【aos.js】のご紹介です。jQueryは不要で、とても軽量のライブラリで、設置も簡単です。
まずは、デモをご確認ください。デモは、画像でエフェクトの確認をして頂けます。コンテンツでも同じようなエフェクトを実装できます。
aos.jsのファイルは、GitHubから入手する事ができます。本家のデモは、コンテンツでエフェクトを確認する事ができます。
設置方法
まずは、GitHubからファイルをダウンロードします。次に、下記のようにhead内に【aos.css】、body内に【aos.js】を読み込みます。
[html]
<head>
<link rel="stylesheet" href="css/aos.css" />
</head>
<body>
…
<script src="js/aos.js"></script>
</body>
[/html]
htmlは、下記のように記載頂くだけで完了です。【data-aos】の箇所を変えるだけでエフェクトを変更する事ができます。下記は、画像のコードを記載しておりますが、divやsectionなどコンテンツのフェイドアニメーションとしても使用できます。
[html]
<div data-aos="fade-up">
<img src="images/sample.jpg" alt="sample_img" />
</div>
[/html]
まとめ
フェイドアニメーションは、ウェブサイトでユーザーの注意を引きたいポイントなどにワンポイントで使うには有効だと思います。aos.jsは軽量でさらに設置も簡単でとても使いがっても良いと思いますので、機会があればトライしてみてください。
