【jQuery】スクロールでテキスト出現させる

サンプル

コード

sample.html

  <div class = "p-about-letter">
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
    <p class = "p-about-letter__word">ああああああああああああああああああああああああ</p>
  </div>

sample.css

.p-about-letter__word {
  opacity : 0;
  transform : translate(0, 100px); /* translate(X方向の距離, Y方向の距離) */
  transition : all 0.5s;
}

.text_visible{
  opacity : 1;
  transform : translate(0, 0);
}

・.text_visible：jQuelyのaddClassで後でクラス付加する。

sample.js

  $(function(){
    $(window).scroll(function (){
      $('.p-about-letter__word').each(function(){
        var textPosition = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > textPosition - windowHeight + 100){
          $(this).addClass('text_visible');
        }
      });
    });
  });

jQueryのコードの説明

①スクロール後の処理

sample.js

$(window).scroll(function () {
  //処理
});

「windowがスクロールされたら以下の処理を実行する」

②要素ごとの処理

sample.js

$('.p-about-letter__word').each(function(){
  //処理
});

・.p-about-letter__wordがついた要素一つ一つに処理を行うことを指定する。

※class名では無く、id指定ではこの処理は行えない。

③ポジションの所得

sample.js

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

・offset().top：windowの最上部から、.p-about-letter__wordのついたクラスまでの距離。

④スクロール位置の所得

sample.js

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

・jQueryオブジェクト.scrollTop();：オブジェクトからのスクロール位置を所得。
・$(window).scrollTop()：windowでブラウザ全体のスクロール位置を取得

⑤ウィンドウの高さ取得

sample.js

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

見たまんま、ウィンドウの高さを取得

⑥addClassを行う位置の指定

sample.js

if (scroll > textPosition - windowHeight + 100){
   $(this).addClass('text_visible');
}

最後に、scroll > textPosition - windowHeightは、
スクロール量 > 「ページトップ〜指定要素の距離」-「ウィンドウの高さ」
を表している。

そして、 + 100で高さの調節をしています。

参考記事

スクロールして可視範囲に入ったら要素を表示するアニメーション【jQuery】