今回はスクロール時のフェードインアニメーションを作っていきたいと思います。
簡単実装できるアニメーションですのでホームページ制作を作りたい方もWEB制作をしたい方もぜひ参考にしてみてほしいです!
01アニメーションのパターン
いろいろなパターンのフェードインアニメーションがありますので私が良く使うフェードインアニメーションを5つ紹介していきます。
その場でフェードイン
See the Pen
fadein-animation by rita-plus (@rita-plus)
on CodePen.
HTML解説
CSS解説
.fadeIn {
transition: 1s;
opacity: 0;
}
.fadeIn.animated {
opacity: 1;
}
.fadeIn
と.animated
の2つのクラスを付与することで.animated
付与前後の.fadeIn
に対してのデザインを変えています。
transition
要素の 2 つの状態間の変化を定義しています。opacity
要素の不透明度を設定しています。
.fadeIn.animated
.animated
が付与されたあとの要素の不透明度を設定します。
JS解説
jQuery(function($) {
$(window).on('load scroll', function (){
var box = $('.fadeIn');
var animated = 'animated';
box.each(function(){
var boxOffset = $(this).offset().top;
var scrollPos = $(window).scrollTop();
var wh = $(window).height();
if(scrollPos > boxOffset - wh + 100 ){
$(this).addClass(animated);
}
});
});
})
画面内の100の位置で.animated
を.fadeIn
に付与するという内容になっています。
なのでこの数値はお好みの位置で変化が起きるように設定いただければOKです。
上からフェードイン
See the Pen
fadein- animation 上から by rita-plus (@rita-plus)
on CodePen.
CSS解説
.fadeIn {
transform: translate3d(0, -50px, 0);
transition: 1s;
opacity: 0;
}
.fadeIn.animated {
transform: translate3d(0, 0, 0);
opacity: 1;
}
要素を移動させたいのでtransform
プロパティを追加しています。このtransform
要素は回転、拡大縮小、傾斜、移動させることができます。
そしてtranslate3d()
は要素を三次元空間内で再配置します。
下からフェードイン
See the Pen
fadein-animation 下から by rita-plus (@rita-plus)
on CodePen.
右からフェードイン
See the Pen
fadein-animation 右から by rita-plus (@rita-plus)
on CodePen.
CSS解説
右からのフェードインの場合transform
を以下のように設定してあげます。すると右からフェードイン要素が現れます
.fadeIn {
transform: translate3d(50px, 0, 0);
transition: 1s;
opacity: 0;
}
左からフェードイン
See the Pen
fadein-animation 左から by rita-plus (@rita-plus)
on CodePen.
CSS解説
左からのフェードインの場合transform
を以下のように設定してあげます。すると左からフェードイン要素が現れます
.fadeIn {
transform: translate3d(-50px, 0, 0);
transition: 1s;
opacity: 0;
}
02まとめ
いかがでしたでしょうか?
ホームページで目立たせたい要素がある場合にアニメーションはとても効果的です!
しかし、アニメーションの使い過ぎには注意が必要です。
過度なアニメーションの使用は本当に目立たせたい要素が埋もれてしまいます。
当サイトではホームページを作りたい方、WEB制作を始めたばかりの方にとっても少しでも参考になることを発信していきます。
クラス名を
box
fadeIn
とします。ここでの
box
はデザインの為のbox
なので削除していただいても問題ありません。