こんにちは！
デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。
Webデザイナーとして勉強している人なら誰もが憧れるふわっと表示させるアニメーション。
実は意外と簡単です。
今回はスクロール時のフェードインアニメーションを作っていきたいと思います。
JSの使用は最小限に抑えてCSSで様々な動きを追加していきます。
また、AnimationのCSSを理解することで応用やアレンジも可能ですので、ぜひ参考にしてください！
目次
JSの追加
jQuery(function($) {
$(window).on('load scroll', function (){
var box = $('.inview');
var animated = 'active';
box.each(function(){
var boxOffset = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
if(scrollPos > boxOffset - wh + 100 ){
$(this).addClass(animated);
}
});
});
})JS解説
基本的には、上のコードをホームページ全体で読み込むjsに追記すればOKです。
画面内の100の位置で.inviewに.activeに付与するという内容になっています。
class名や「100」の数値はお好みの位置で変化が起きるように変更してもOKです。
HTMLにJSの読み込みを追記し、動かしたい箇所にclassを追加
<main>
<div class="item">
<h3 class="headLine inview" >見出し</h3>
<img src="image01.jpg" alt="画像01" width="100%" height="auto" >
<p>テキストが入ります。</p>
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>.headLineに.inviewを追記しました。
jquery本体を読み込んでいない場合は、合わせて追加してください。
ファイルのパスや名前は自身の環境に合わせて変更してください。
jQuery本体とは？
JavaScriptのライブラリであるjQuery。
複雑なコードを入力しないといけないものが簡単なコードで実現できてしまうもので、今回のスクロールでクラスを付与する命令もjQuery本体の元で動作します。
作成中のホームページにまだ導入していない場合は、以下のリンクから最新版をダウンロードして読み込ませましょう。
JSが動作しているかチェック
ここまで出来たら、JSが正しく動作しているか「要素を検証」を用いてチェックしましょう。
正しく設定されていれば、.inviewを付けた部分が画面に入ると、.activeが付与されます。
.activeが付与されればJSは完成です。
この時点では、何もアニメーションは実装していません。
表示領域に入ったら付与されるclassを用いて、CSSでアニメーションを実装していきます。
- JSは読み込まれているか？
- jQuery本体は読み込まれているか？読込が重複していないか？
- jQuery本体→自分で作成したJSの順番で読み込んでいるか？
- classにスペルミスは無いか？
- コンソールにエラーは出ていないか？
CSSの追加
.inview.fadeup {
opacity: 0;
transition-duration: .5s;
transform: translateY(10px);
}
.inview.fadeup.active {
opacity: 1;
transform: translateY(0px);
}CSS解説
.inviewと.fadeup両方のclassが付いている要素を、透明(opacity: 0;)にして元の位置より10px下(transform: translateY(10px);)に下げます。
また変化する時は0.5秒かけて変化します(transition-duration: .5s;)。
.inviewと.fadeupさらに.activeが付いた要素を、出現(opacity: 1;)させ、元の位置に戻します(transform: translateY(0px);)
下から上に10px動きながら0.5秒かけて出現させることで、ふわっと浮き上がって表示されるように見えます。
HTMLの動かしたい箇所にclassを付与
<main>
<div class="item">
<h3 class="headLine inview fadeup" >見出し</h3>
<img src="image01.jpg" alt="画像01" width="100%" height="auto" >
<p>テキストが入ります。</p>
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>.headLineの.inviewを追記した箇所に.fadeupも追記しました。
問題なく設定出来ていれば、下のボタンのようにふわっと表示されます。
※既に表示されている場合は、再読み込みして確認してください。
- CSSは読み込まれているか？
- classにスペルミスは無いか？
- .inviewと.fadeup両方付与されているか？
- 別のCSSと干渉していないか要素を検証で確認
CSSの応用
.inview.fadedown {
opacity: 0;
transition-duration: .5s;
transform: translateY(-10px);
}
.inview.fadedown.active {
opacity: 1;
transform: translateY(0px);
}
.inview.fadeleft {
opacity: 0;
transition-duration: .5s;
transform: translateX(-10px);
}
.inview.fadeleft.active {
opacity: 1;
transform: translateX(0px);
}
.inview.faderight {
opacity: 0;
transition-duration: .5s;
transform: translateX(10px);
}
.inview.faderight.active {
opacity: 1;
transform: translateX(0px);
}
.delay01 {
transition-delay: .3s;
}
.delay02 {
transition-delay: .6s;
}
.delay03 {
transition-delay: .9s;
}CSS解説
.fadeupのCSSを応用して、最初に隠れている位置を上下左右に変更しています。
こうすることで、上下左右から出てきたように見えます。
また、アニメーションの動作を遅らせる(transition-delay)ことで、順番に表示させるといったことも簡単に出来ます。
最初に隠れている位置の数値を大きくしたり、変化する時間を長くすると印象が変わります。
ご自身のサイトに合った動きに変更してみてください。
<ul>
<li class="inview fadedown">上から</li>
<li class="inview fadeup">下から</li>
<li class="inview fadeleft">左から</li>
<li class="inview faderight">右から</li>
</ul>
<ul>
<li class="inview fadeup">順番に</li>
<li class="inview fadeup delay01">順番に</li>
<li class="inview fadeup delay02">順番に</li>
<li class="inview fadeup delay03">順番に</li>
</ul>デモ
- 上から
- 下から
- 左から
- 右から
- 順番に
- 順番に
- 順番に
- 順番に
※既に表示されている場合は、再読み込みして確認してください。
まとめ
いかがでしょうか？意外と簡単に実装出来たのではないでしょうか？
ホームページで目立たせたい要素がある場合、アニメーションはとても効果的です！
しかし、過度なアニメーションは本当に目立たせたい要素を埋もれさせてしまうこともあるので、使いどころを吟味して効果的に使用してください。
資料請求