みなさん、こんにちは。
MEGIDO(メギド)です。

今回はこれからWEBサイトを作成していきたいと思っている
初心者の方の為に「スクロールしていくとコンテンツが
どんどんフェードインしていくアニメーションの実装方法」を紹介します。

こんな感じのサイトのアニメーションですね。
https://artio.co.jp/

けっこうな確率で実装することが多い
アニメーションだと思うので覚えておいて損はないと思います!

 

スクロールしていくとコンテンツがフェードインするアニメーションのコード

個人的に初心者でも簡単かなと思うjQueryとcssを使った方法をご紹介します。
手っ取り早くコードだけ知りたい方もいると思うので、先にコード書いておきましょう。

cssのコード

 

js(jQuery)のコード

上記のコードを呪文のように記述して、
html内のフェードインさせたいタグに「fadein」と記述すれば
望むアニメーションが完成します。

とりあえず実装したいだけならばこれを使いましょう。
次の部分ではcssとjQueryのコードの詳細について説明します。

スクロールしていくとコンテンツがフェードインするアニメーションのコード解説

先ほどのコードの解説です。
まずはcssの方から。

「opacityプロパティ」は要素の透明度を指定できます。
0が完全に透明で、1が完全に不透明です。
今回の場合はスクロールで要素が見えるまでは0にしておいて、
要素が見えたら1にして表示させています。

「transformプロパティのtranslate」は要素の位置を指定が可能です。
最初がX方向の移動距離を最後がY方向の移動距離を決めています。
今回の場合は、要素が見える前はY方向に50pxだけ要素をずらして、
スクロールで要素が見えたら元に位置に戻るようにしています。

「transitionプロパティ」はアニメーションの時間を指定できます。
今回、詳しいことは割愛しますが、この部分の時間を調整することで
要素が表示される時の「ふわっと具合」を調整することが可能です。

続いてjs(JQuery)の説明をします。

ざっくりの説明になりますが、

「$(window).scroll」

スクロールした時にプログラムが動くように指定。

 

「 $(‘.fadein’).each」

htmlにfadeinクラスが付与されているものに対して繰り返し処理を実行。

 

var elemPos = $(this).offset().top;

fadeinクラスが付与されている要素のtopからの高さを取得し、変数に代入

 

var scroll = $(window).scrollTop();

ブラウザのスクロール位置を取得し、変数に代入

 

var windowHeight = $(window).height();

windowの高さを取得し、変数に代入

 

if (scroll > elemPos – windowHeight + 100) {
$(this).addClass(‘scrollin’);
}

もしfadeinクラスが付与されている要素が、window内に入り、
さらに100pxスクロールされたならば、その要素に「scrollin」クラスを付与する

これによってcssで指定していたアニメーション開始され、
要素がフェードインして表示されます。

 

まとめ

今回は「スクロールして要素が画面内にきたらフェードインする実装方法」をご紹介しました。
けっこう使えるアニメーションだと思うので、参考にしてみてください。

それでは今回はここまで。
最後までお読みいただきありがとうございました。

まとめ

RECOMMENDED POSTこの記事もおすすめ!