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

jQueryのイラスト

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

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

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

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

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

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

コードを表示する

jQuery

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

/* スクロール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" をつけることで、上からふわっと落ちてくるフェードインのアニメーションがつきます。

計算のイラスト
EFOのイラスト
ドロップダウンリストのイラスト

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

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

計算のイラスト
EFOのイラスト

ドロップダウンリストのイラスト

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

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

計算のイラスト
EFOのイラスト
ドロップダウンリストのイラスト

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

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

計算のイラスト
EFOのイラスト

ドロップダウンリストのイラスト

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影