スクロールするとふわっと表示する方法【 jQueryプラグインなし 】

サイトをリッチに見せるために、スクロールすると画像などを、ふわっと表示させる方法をご紹介します。

スクロールするとふわっと表示する方法【 jQueryプラグインなし 】

まずは、デモをご覧ください。

See the Pen
Untitled by 小坂　蓮 (@kokaka-ren)
on CodePen.

画面を下にスクロールすると、ふわっと画像が表示されていると思います。

【 jQueryプラグイン 】を使用することで、このような動きをつけることも可能ですが、
今回は、【 jQueryプラグインなし 】での方法を解説しますね。

HTML

まずは、ふわっと表示させたい要素に対して、クラス名【 inview 】を付与します。

<ul>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
  <li class="inview">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="">
  </li>
</ul>

付与するクラス名は自由ですので、【 js-fade 】でも【 fadein 】でも、
分かりやすい名前で付与してください。
（＊後述するクラス名は、HTMLに付与したクラス名と合わせてください。）

CSS

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  position: relative;
  width: 50%;
  list-style: none;
}

li:before {
  display: block;
  padding-top: 100%;
  content: '';
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スクロールすると下からふわっとさせるためのコード */
.inview {
  /* 30px下げる */
  transform: translateY(30px);
  /* 要素を透明にする */
  opacity: 0;
  /* 2秒かけて、変化させる */
  transition: transform 2s, opacity 2s;
}

.inview.show {
  transform: translateY(0);
  opacity: 1;
}

【 ul 】や【 li 】タグのスタイルは、適当につけてますので、読み流してください。

先程、HTML側に付与したクラス名【 inview 】に対して、
下からふわっと表示させたいので、30px下げて、透明にさせます。

jQuery

/*=================================================
コメントあり
=================================================*/
// スクロール操作したとき
$(window).on('scroll', function () {

  // クラス名【 inview 】が付与されている、全ての要素に対して処理を実行
  $('.inview').each(function() {

    // ブラウザの最上部から、クラス名【 inview 】が付与されている要素の位置を取得
    var targetPosition = $(this).offset().top;

    // ブラウザの最上部からのスクロール量を取得
    var scroll = $(window).scrollTop();

    // ウィンドウの高さを取得
    var windowHeight = $(window).height();

    // ブラウザの最上部からのスクロール量 > クラス名【 inview 】が付与されている要素の位置 - ウィンドウの高さを取得
    if (scroll > targetPosition - windowHeight) {

      // クラス名【 show 】を付与
      $(this).addClass('show');
    }
  });
});

/*=================================================
コメントなし
=================================================*/
$(window).on('scroll', function () {
  $('.inview').each(function() {
    var targetPosition = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > targetPosition - windowHeight) {
      $(this).addClass('show');
    }
  });
});

コメントで説明を簡単にですが記述しておりますので、そちらを参考にしてください。

コピペで使いたい方は、【 コメントなし 】をお使いください。

特別、複雑なことはしておりませんので、すぐに理解ができるかと思います。

スクロールすると、左から順番にふわっと表示する方法

例えば、横に4枚で画像が並んでいて、左から時間差でふわっと表示する方法を紹介しますね。

時間差で行いため、今回はシンプルにCSSの【 transition-delay 】と【 nth-child(nth-of-type) 】を組み合わせて使います。

デモをご覧ください。

See the Pen
Untitled by 小坂　蓮 (@kokaka-ren)
on CodePen.

特に説明不要かと思います。

【 nth-child(2) 】のように、個別に時間差をかけずに、【 nth-child(4n – 2) 】のように、
該当する列に対して、一度に【 transition-delay 】を付与します。

【 nth-child(nth-of-type) 】に関して、もう少し詳しく知りたい方は以下の記事をご覧ください。

【有料級】nth-child（nth-of-type）のチートシート

今回は以上です！