ブログBLOG

[jQuery]スクロールに応じてホワッと表示させる効果（スクロールエフェクト）を簡単に実装する

更新日：2017/06/29

eyecatch_simple_scroll_effect
サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。
そんな効果をスクロールエフェクトと呼びますが、あまりゴテゴテした動きをつけると逆にサイトが読みづらくなるときもあるので、サイトのコンセプトに沿ったエフェクトを選択する必要があります。
しかし、シンプルなスクロールエフェクトはたいていのサイトに馴染みますし、プラグインなどを使わなくても簡単なjsで実装できます。

<script type="text/javascript">
(function ($) {
  // 画面下からどの程度の位置でエフェクトするかの設定
  var EffectH = 100;
  // どのくらい動かすかの設定
  var EffectTop = 15;
  // エフェクト時間(ms)
  var EffectTime = 400; 
  // 事前準備として少し下げたところに透明にして配置。
  $('.my-effect').css({ position: 'relative', left: 0, top: EffectTop, opacity: 0, transition: EffectTime + 'ms' });
  // スクロールイベント
  $(window).on('scroll load', function() {
    var scTop = $(this).scrollTop();
    var scBottom = scTop + $(this).height();
    var effectPos = scBottom - EffectH;
    // エフェクト対象それぞれの位置とスクロール位置を比べて
    // 範囲に入っていればエフェクトを実行する
    $('.my-effect').each( function() {
      var thisPos = $(this).offset().top;
      if ( thisPos < effectPos ) {
        $(this).css({ 'opacity' : 1, top: 0 });
      }
    });
  });
})(jQuery);
</script>

(function ($) {

// 画面下からどの程度の位置でエフェクトするかの設定

var EffectH = 100;

// どのくらい動かすかの設定

var EffectTop = 15;

// エフェクト時間(ms)

var EffectTime = 400;

// 事前準備として少し下げたところに透明にして配置。

$('.my-effect').css({ position: 'relative', left: 0, top: EffectTop, opacity: 0, transition: EffectTime + 'ms' });

// スクロールイベント

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

var scTop = $(this).scrollTop();

var scBottom = scTop + $(this).height();

var effectPos = scBottom - EffectH;

// エフェクト対象それぞれの位置とスクロール位置を比べて

// 範囲に入っていればエフェクトを実行する

$('.my-effect').each( function() {

var thisPos = $(this).offset().top;

if ( thisPos < effectPos ) {

$(this).css({ 'opacity' : 1, top: 0 });

}

});

})(jQuery);

</script>

ホワッと出てきたボタンは、押してみたくなったりするかもしれません。

BRISK BLOGjQuery Tips

これの良いところは、html側はクラスをつけるだけ、そしてcssは何もいじらなくても実装できる点です。
大変シンプルなので、仕組みが分かればいろいろ応用することも簡単です。

横からシュッと出すエフェクトとか。

・・・
  $('.my-effect-left').css({ position: 'relative', left: EffectLeft, top: 0, opacity: 0, transition: EffectTime + 'ms' });
  // スクロールイベント
  $(window).on('scroll load', function() {
    var scTop = $(this).scrollTop();
    var scBottom = scTop + $(this).height();
    var effectPos = scBottom - EffectH;

    $('.my-effect-left').each( function() {
      var thisPos = $(this).offset().top;
      if ( thisPos < effectPos ) {
        $(this).css({ 'opacity' : 1, left: 0 });
      }
    });
・・・

・・・

$('.my-effect-left').css({ position: 'relative', left: EffectLeft, top: 0, opacity: 0, transition: EffectTime + 'ms' });

// スクロールイベント

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

var scTop = $(this).scrollTop();

var scBottom = scTop + $(this).height();

var effectPos = scBottom - EffectH;

$('.my-effect-left').each( function() {

var thisPos = $(this).offset().top;

if ( thisPos < effectPos ) {

$(this).css({ 'opacity' : 1, left: 0 });

}

});

・・・

ボタンの色を途中で変化させるエフェクトとか。

お問い合わせ

・・・
  $('.my-effect-color').css({ background: '#ffbdc3', transition: EffectTimeColor + 'ms' });
  // スクロールイベント
  $(window).on('scroll load', function() {
    var scTop = $(this).scrollTop();
    var effectPos = scTop + EffectH;

    $('.my-effect-color').each( function() {
      var thisPos = $(this).offset().top;
      if ( thisPos < effectPos ) {
        $(this).css({ background: '#b31d23' });
      }
    });
・・・