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

それぞれのオブジェクトまでスクロールした時に、classをつけたオブジェクトにアニメーションを付与させます。

このアニメーションは、別途jQueryのライブラリなどを使用することなく、簡単で数行程度のjQueryとCSSの記述で実装することができるので、非常に便利です。

今回は、jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペットについてご紹介します。

使用するjQueryとCSSのスニペット

使用する前に、jQueryとCSSのコードをそれぞれ記述しましょう。

この数行の記述でアニメーションを付けることができます。

jQuery(function ($) {
  var fadeIn = $('.fade-in');
  $(window).scroll(function () {
    $(fadeIn).each(function () {
      var offset = $(this).offset().top;
      var scroll = $(window).scrollTop(); 
      var windowHeight = $(window).height();
      if (scroll > offset - windowHeight + 150) {
        $(this).addClass("scroll-in");
      }
    });
  });
});

/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

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

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

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

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

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

フェードインのサンプル

フェードインのアニメーションをつけたいタグのclassに、それぞれを記述することで簡単にアニメーションを付けることができます。

下から上にふわっと表示するフェードイン

アニメーションをつけたいタグのclassに class="fade-in fade-in-up" をつけることで、上からふわっと落ちてくるフェードインのアニメーションがつきます。

左からスライドして表示されるフェードイン

左からスライドさせるには、 class="fade-in fade-in-left" をつけることで、左からスライドして表示させることができます。

上から下に落ちてくるフェードイン

上から下に落ちてくるフェードインさせるには、 class="fade-in fade-in-down" をつけてアニメーションさせることができます。

右からスライドして表示されるフェードイン

右からスライドさせるには、 class="fade-in fade-in-right" をつけることで、右からスライドして表示させることができます。

ネイティブなJavaScriptでのスニペット

私事ですが、ネイティブなJavaScriptの学習を始めました。結論、今のJavaScriptはやりたいことを簡単な記述で再現できるようになっています。

以下の記事は、この記事と同じフェードインさせるアニメーションをネイティブなJavaScriptに置き換えたスニペットになっています。

2022年1月1日JavaScriptの.getBoundingClientRect()のスクロールでふわっと要素をフェードイン

かかかず

是非こちらの記事も参考にしてみてください。