jQueryのみでスクロール時に要素が可視範囲に入ったらコンテンツを表示させる

Webページのコンテンツの見せ方として、アニメーションの動きを加えることもユーザーの目を引く一つのデザインです。
いろんなアニメーションがある中で、スクロールした時に可視範囲に入った要素がフェードインする動きもよくあるアニメーションです。

その方法として、jQueryとCSSの両方を使って実装することがよくありますが、もしユーザーがセキュリティの対策や何らかの理由でWebブラウザのJavaScriptをOFFにしていると、CSSで非表示にしてjQueryでスクロール時の表示コントロールをしていた場合、JSが動かないのでコンテンツが表示されなくなります。

JSのみで処理することができれば、もしJavaScriptが無効であってもただプログラムが動かないだけで、コンテンツの表示には影響を受けません。

ここでは、JavaScriptを簡易的に書くことができるjQueryを用いて、スクロール時に要素が可視範囲に入ったらコンテンツを表示させる方法をご紹介します。

スクロール時の表示コントロール

まずはHTMLから。

サンプルとして、3つのセクションでコンテンツを用意してみます。
2つ目と3つ目のセクションに追加で「ef」というクラスをつけておいて、こちらをjQueryで処理します。
最初のセクションは、はじめから見える部分なので、追加のクラスは付けません。

HTML

<section>
  <div class="section-conts">
    <h2>Headline</h2>
    <p>Example text... Example text... Example text... Example text... Example text... Example text... </p>
  </div>
</section>

<section>
  <div class="section-conts ef">
    <h2>Headline</h2>
    <p>Example text... Example text... Example text... Example text... Example text... Example text... </p>
  </div>
</section>

<section>
  <div class="section-conts ef">
    <h2>Headline</h2>
    <p>Example text... Example text... Example text... Example text... Example text... Example text... </p>
  </div>
</section>

続いてCSS。
ここでのサンプルでは簡単なレイアウト調整をしておきます。

CSS

section {
  width: 100%;
  height: 100vh;
  background: #e7e7e7;
}

section:nth-child(even) {
  background: #d3d3d3;
}

.section-conts {
  padding: 4%;
}

ここからjQueryを使って、「ef」というクラスの付いたコンテンツに対して表示のコントロールをしていきます。

以下、jQueryのコードになります。

jQuery

$(function(){
  $('.ef').css({opacity: 0});
  $(window).on('scroll', function(){
    $('.ef').each(function(){
      let ePos = $(this).offset().top;
      let scroll = $(window).scrollTop();
      let windowHeight = $(window).height();
      if (scroll > ePos - windowHeight + windowHeight/5){
        $(this).animate({opacity: 1}, {duration: 600, easing: 'swing'});
      }
    });
  });
});

まずはじめに、クラス「ef」に対してCSSメソッドで「opacity: 0」として非表示にしておきます。

次に、「$(window).on(‘scroll’ ,function (){}」でスクロール時のプログラムを書きます。
each()メソッドを使って、複数あるクラスに対して繰り返し処理を行います。
変数「ePos」では、スクロールした際に可視範囲に入ったクラス要素に対して、offset()メソッドに.topをつなげて要素のTOPの位置を取得します。
変数「scroll」では、Webブラウザのウィンドウの最上部のスクロール位置を取得します。
変数「windowHeight」では、ウィンドウの高さを取得します。

ここからif文を用いて、3つの変数に入っている値を計算して対象の要素の位置を把握していきます。
計算の中で、「windowHeight/5」を最後に足すことで、要素の可視範囲からウィンドウの高さの5分の1の高さ分スクロールしたら表示するようにしています。
if文の処理では、対象要素に対してanimate()メソッドを使い、非表示にした要素をアニメーションさせて表示させます。また、一緒にdurationで変化の時間、easingで変化の動きを設定してみました。

実際の実行結果がこちら。
動画（4分ほど）