jQueryで画面内に入った要素をフェードインさせる

お疲れ様です。
ライフマップ開発チームの石上です。
「ページをスクロールしていき、特定の要素が画面の中に入ったタイミングでフェードインさせる」という仕組みを、jQuery（今時ちょっと古いかもしれませんが、お手軽なので…）を用いて作りたいと思います。

サンプルコード

始めに、HTML・CSS・Javascript(jQuery)のサンプルコードをそれぞれ記しておきます。コピペですぐに動作確認ができると思います（jQueryの読み込みを忘れずに！）
実装内容の性質上、HTMLに他の要素を足したり、余白などを設定したりしてスクロールできるようにしておくと良いでしょう。

<p class="para js-trigger">テキスト</p>

.para {
  position: relative;
  left: -20px;
  opacity: 0;
  transition: all 0.4s;
}

.para.is-active {
  left: 0;
  opacity: 1;
}

$(function(){
 $(window).scroll(function(){
  $('.js-trigger').each(function(){
   var scroll = $(window).scrollTop();
   var pos = $(this).offset().top;
   var delay = 400;
   if (scroll > pos - delay){
    $(this).addClass('is-active');
   }
  });
 });
})

コードの解説

ここでは、言語ごとに何をやっているか・何を意図してこのコードを書いたか解説していきます。

HTML

この機能を実装するにあたり、フェードインさせたい要素が画面内に入ったかどうかを監視する必要があります。そのため、該当要素には「js-trigger」という監視用のクラスを付与しておきます。
また、スタイリング用に別のクラスも用意しておきます。サンプルでは「para」となっていますが、任意の名前でOKです。

CSS

「js-trigger」が付与されている要素が画面内に入ると、新しく「is-active」というクラスが追加されます。（この仕組みは、後述のJavascriptで実装されます。）
初期状態を「para」、画面内に入った状態を「.para.is-active」という風に使い分けて、アニメーションを実装しましょう。
ここでは「opacity」と「left」の値をそれぞれ変化させることで、「左からフェードインしてくる」というアニメーションになります。

jQuery(Javascript)

ここからが肝要です。

$(window).scroll(function(){
  $('.js-trigger').each(function(){
   // 処理内容
  });
 });

まずは「画面をスクロールした時に「.js-trigger」というクラスそれぞれに対して以下の処理を施すよ」という宣言をし、続けて処理の内容を記述していきます。

var scroll = $(window).scrollTop(); //スクロール量を取得
var pos = $(this).offset().top; //要素のy座標を取得
var delay = 400;

処理の内容を具体的に見ていきましょう。
スクロール量・要素のy座標が必要になりますので、それぞれ変数に格納してあげます。scrollTopメソッドでスクロール量を、offsetメソッドで対象要素のy座標を取得できます。

if (scroll > pos - delay){ //スクロール量 > 要素のy座標 - ディレイ
  $(this).addClass('active');
}

次のif構文でひとまず完成です。「スクロール量が要素のy座標よりも大きくなった場合」という条件を設け、それを満たした時にaddClassメソッドで「is-active」というクラスを追加します。

最後に、今までスルーしてきた「delay」という変数について言及して終わりたいと思います。

この「delay」ですが、無くしたとしても基本的な仕組みは実装できます。しかし、そうすると要素が画面外に消えていくギリギリで現れることになってしまうので、せっかくのアニメーションもあまり恩恵がありません。

そこで、「delay」という変数を定義して計算式に組み込み、フェードインのタイミングを調整します。
「スクロール量 > 要素のy座標 − delay」の式により、実際の座標よりも少し高めの位置で判定を起こせるようになるのです。

終わりに

今回はjQueryを用いて、「画面内に要素が入ったタイミングでフェードインさせる」機能を実装しました。

実はフェードインくらいの簡単なアニメーションだったらそれ用のライブラリとか使っちゃったほうが楽だしパフォーマンスも上なのですが、ちょっと手の込んだことをやりたい時はクラス制御＋CSSアニメーションの方が都合が良い場合もあります。

今度の記事はライブラリ紹介とか面白いかもですね。
ではまた！