jQuery ページスクロールでコンテンツをふわっとフェードイン

ページをスクロールしてフワッとコンテンツが表示されるようにしたい！

と思い、調べてみるとどうやらjQueryで実現できることがわかりました。

この記事ではjQueryとCSSでページをスクロールして所定の位置に画面が移動したらコンテンツをフワッと表示するコードと実装方法を紹介します。

jQueryでコンテンツフェードインのカスタマイズ手順

カスタマイズ手順は以下の通り。

script.js にコードをコピペ

script.js ファイルに次のコードを貼り付けます。

(function ($){
    $(document).ready(function ($){
        // フェードイン
        $(window).scroll(function () {
            $('.fadeIn').each(function () {
                var scroll = $(window).scrollTop(); // 現在のスクロール位置
                var offset = $(this).offset().top; // 対象の上からの位置
                var windowHeight = $(window).height(); // ウィンドウの高さ
                if (scroll > offset - windowHeight + 150) {
                    $(this).addClass("scrollIn");
                }
            });
        });
    });
})(jQuery);

style.css にコードをコピペ

style.css に以下のコードをコピペをします。

/* スクロール フェードイン
-------------------------------------------------- */
.fadeIn {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fadeIn-up {
  transform: translate(0, 50px);
}

.fadeIn-down {
  transform: translate(0, -50px);
}

.fadeIn-left {
  transform: translate(-50px, 0);
}

.fadeIn-right {
  transform: translate(50px, 0);
}

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

フェードインのサンプル

フェードインさせたい対象に所定の Class を付与してあげるだけで、簡単にアニメショーンをつけることができます。

下から上にフワッとフェードイン

下から上にフェードインをさせるにはfadeInとfadeIn-upクラスを付与してあげます。

左から右にフワッとフェードイン

下から上にフェードインをさせるにはfadeInとfadeIn-leftクラスを付与してあげます。

右から左にフワッとフェードイン

下から上にフェードインをさせるにはfadeInとfadeIn-rightクラスを付与してあげます。

上から下にフワッとフェードイン

下から上にフェードインをさせるにはfadeInとfadeIn-downクラスを付与してあげます。

おわりに

jQueryの知識がなくてもコピペだけで実装ができめっちゃくちゃ驚きました。

意外と難しそうな技術でもあっさりと実装できる場合もあるのでプログラミングって奥が深いな〜と思いました。

参考：
jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット