2020/08/04 2022/06/19

スクロールしたときに要素をjQueryでフェードインする方法【コピペOK】

JavaScript

スクロールでフェードインさせたい人「Webページをスクロールしたときに、ふわっと要素をフェードインで表示させたい。jQueryは難しそうだし、何か簡単にできそうな方法ないかな」

こういった相談に答えます。

スクロールしたときに要素をjQueryでフェードインする方法
フェードインをjQueryでカスタマイズしてみる

Webページをスクロールしたときに、要素がふわっと表示させる現象を「フェードイン」といったりしますが、その実装方法は色々あります。

そこで、今回は、コピペ可能なコードを紹介します。この記事のコードをそのままコピペすることで使用できます。

誰でもサクッと出来るコピペコードを、現役コーダーが解説していきます。

WebページをスクロールしたときにjQueryでフェードインする方法

WebページをスクロールしたときにjQueryでフェードインする方法
フェードインに必要なコードを紹介します。まず、完成形のイメージを共有しますね。

こういったものを作ります。実装に必要なコードは下記の通り。

HTML
CSS
jQuery

順番に解説します。

HTML

HTMLはふわっと表示させたい要素を追加しておきます。そして、その要素に適当なクラスをつけておきます。

要素やクラス名は何でもOK。今回は、imgタグにeffect-fadeというクラスを追加しておきます。

HTMLのコード

<img class="effect-fade" src="./images/cat1.jpg" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

今回はjQueryを読み込んでおく必要があるので、</body>の前でjQueryを読み込むようにします。これがないと動作しないので、要注意。

HTMLはこれでOKです。

CSS

次にCSSを追加します。

CSSは下記の通りです。シンプルですね！

CSSのコード

.effect-fade {
  opacity: 0;
  transform: translate(0, 100px); /* フェードインで動く高さを指定 */
  transition: all 2000ms; /* フェードインにかかる時間を指定 */
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

CSSもこれでOKです。

ちなみに、軽く説明をすると、「2秒かけて、100pxフェードインとして動きます」という意味になります。100pxと2000msのところを調節すると、フェードインの調節が可能です。

jQuery

最後はjQueryです。

jQueryのコード

// スクロールフェードイン
$(function () {
  $(window).scroll(function () {
    $(".effect-fade").each(function () {
      var elemPos = $(this).offset().top; /* 要素の位置を取得 */
      var scroll = $(window).scrollTop(); /* スクロール位置を取得 */
      var windowHeight = $(window).height(); /* 画面幅を取得（画面の下側に入ったときに動作させるため） */
      if (scroll > elemPos - windowHeight) {
        /* 要素位置までスクロール出来たときに動作する */
        $(this).addClass("effect-scroll");
      }
    });
  });
  jQuery(window).scroll();
});

jQueryに慣れていないと、少し読みにくいかもですね。上記のコメントにも記載しましたが、簡単にまとめると、、、

指定した要素が画面内に入ってきたら、フェードイン用のクラスを追加する

という感じです。
もし興味があれば、ぜひ調べてみてください。

ちなみに、最後の「jQuery(window).scroll();」は、フェードインしたい要素が画面内にある状態で再読み込みしたときでも、スクロールなしでフェードイン表示されるように書いています。

確認してみよう

さて、これで完了です。実際にスクロールしてみると、ふわっとフェードインで表示されるはずです。

フェードインをjQueryでカスタマイズしてみる

フェードインをjQueryでカスタマイズしてみる
フェードインのコードは上記で完了ですが、少しだけカスタマイズしてみます。

例えば、横に３つ並んでいる要素を、左から順番にフェードインさせたい場合のコードを作ってみましょう。

HTML

先ほどのコードに、要素を２つ追加しておきます。

HTMLのコード

<img class="effect-fade" src="./images/cat1.jpg" alt="" />
<img class="effect-fade" src="./images/cat2.jpg" alt="" /> <!-- ここを追加 -->
<img class="effect-fade" src="./images/cat3.jpg" alt="" /> <!-- ここを追加 -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

CSSも同じく、スタイルを追加しておきます。

CSSのコード

.effect-fade {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 2000ms;
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
/* 以下が追加の部分 */
/* 2つ目の要素に400msのdelayをかける */
.effect-fade:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
/* 3つ目の要素に800msのdelayをかける */
.effect-fade:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}

要素の表示に、少し遅延をかけています。こういった方法を「delayをかける」といったりします。