Blog

ブログ

【jQuery】
スクロールするとフェードイン表示されるアニメーションの作り方

2023.03.22

今回はスクロール時のフェードインアニメーションを作っていきたいと思います。

簡単実装できるアニメーションですのでホームページ制作を作りたい方もWEB制作をしたい方もぜひ参考にしてみてほしいです!

01アニメーションのパターン

  

いろいろなパターンのフェードインアニメーションがありますので私が良く使うフェードインアニメーションを5つ紹介していきます。

その場でフェードイン

See the Pen
fadein-animation
by rita-plus (@rita-plus)
on CodePen.

HTML解説

クラス名をboxfadeInとします。
ここでのboxはデザインの為のboxなので削除していただいても問題ありません。

CSS解説

.fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

.fadeIn.animatedの2つのクラスを付与することで.animated付与前後の.fadeInに対してのデザインを変えています。

transition要素の 2 つの状態間の変化を定義しています。opacity要素の不透明度を設定しています。

.fadeIn.animated.animatedが付与されたあとの要素の不透明度を設定します。

JS解説

jQuery(function($) {
$(window).on('load scroll', function (){

  var box = $('.fadeIn');
  var animated = 'animated';
  
  box.each(function(){
  
    var boxOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    if(scrollPos > boxOffset - wh + 100 ){
      $(this).addClass(animated);
    }
  });
});
})

画面内の100の位置で.animated.fadeInに付与するという内容になっています。

なのでこの数値はお好みの位置で変化が起きるように設定いただければOKです。

上からフェードイン

See the Pen
fadein- animation 上から
by rita-plus (@rita-plus)
on CodePen.

CSS解説

.fadeIn {
  transform: translate3d(0, -50px, 0);
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

 

要素を移動させたいのでtransformプロパティを追加しています。このtransform要素は回転、拡大縮小、傾斜、移動させることができます。

そしてtranslate3d()は要素を三次元空間内で再配置します。

下からフェードイン

See the Pen
fadein-animation 下から
by rita-plus (@rita-plus)
on CodePen.

右からフェードイン

See the Pen
fadein-animation 右から
by rita-plus (@rita-plus)
on CodePen.

CSS解説

右からのフェードインの場合transformを以下のように設定してあげます。すると右からフェードイン要素が現れます

.fadeIn {
  transform: translate3d(50px, 0, 0);
  transition: 1s;
  opacity: 0;
}

左からフェードイン

See the Pen
fadein-animation 左から
by rita-plus (@rita-plus)
on CodePen.

CSS解説

左からのフェードインの場合transformを以下のように設定してあげます。すると左からフェードイン要素が現れます

.fadeIn {
    transform: translate3d(-50px, 0, 0);
    transition: 1s;
    opacity: 0;
}

02まとめ

  

いかがでしたでしょうか?
ホームページで目立たせたい要素がある場合にアニメーションはとても効果的です!

しかし、アニメーションの使い過ぎには注意が必要です。

過度なアニメーションの使用は本当に目立たせたい要素が埋もれてしまいます。

当サイトではホームページを作りたい方、WEB制作を始めたばかりの方にとっても少しでも参考になることを発信していきます。

rita-plus.web_sales-banner

Contact
お問い合わせ

まずはお気軽にご相談ください