jQueryスクロール系アニメーション

HOME > jQueryを使用したアニメーション > jQueryスクロール系アニメーション

スクロールで要素が順番に出現するアニメーション

See the Pen Untitled by 阪井真実 (@dkvcfvga-the-styleful) on CodePen. 

jQuery(function($){ //jQuery
//ここにコードを追加
});//jQueryend
DENO

アニメーションを繰り返さないパターン

 $(document).ready(function() {
    function onScrollAnimation() {
      $('.animate').each(function() {
        var elementTop = $(this).offset().top;
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        
        // 要素が画面内に入ったとき
        if (scrollTop > elementTop - windowHeight + 100) {
          $(this).addClass('visible');
        }
      });
    }
  
    // スクロールイベントでアニメーションを実行
    $(window).on('scroll', onScrollAnimation);
  
    // ページ読み込み時に一度チェック
    onScrollAnimation();
  });

jQueryを使用せず、JavaScripで実装する場合

   // 要素が画面内に入ったかどうかをチェックする関数
    function onScrollAnimation() {
      var elements = document.querySelectorAll('.animate');
      var windowHeight = window.innerHeight;

      elements.forEach(function(element) {
        var elementTop = element.getBoundingClientRect().top;

        // 要素が画面内に入ったら 'visible' クラスを追加
        if (elementTop < windowHeight - 100) {
          element.classList.add('visible');
        }
      });
    }

    // スクロールイベントでアニメーションを実行
    window.addEventListener('scroll', onScrollAnimation);

    // ページ読み込み時に一度実行して初期表示をチェック
    window.addEventListener('load', onScrollAnimation);
DEMO

スクロールでヘッダ高さを縮小して固定

See the Pen ヘッダ追随 by 阪井真実 (@dkvcfvga-the-styleful) on CodePen.

DEMO
jQueryで動きのあるサイトを作成しよう!

Topics