【Animate.css】スクロールに応じてアニメーション表示する方法

2019年6月12日Animate.css,CSSライブラリ,CSS,CSSアニメーション

「Animate.css」のアニメーションを利用してスクロール量に応じて要素を表示していくサンプルです

色々な方法が考えられますが実装が簡単なものをまず

動作サンプル

See the Pen Animate.css Scroll IN（jQuery） by yochans (@yochans) on CodePen.

サンプルコードと説明

html

<div id="boxA" class="animated"></div>
<div id="boxB" class="animated"></div>
<div id="boxC" class="animated"></div>
<div id="boxD" class="animated"></div>
<div id="boxE" class="animated"></div>

CSS

div{
  height:400px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:1px 0;
  color:#FFF;
  visibility:hidden;
}

#boxA{
  background-color: #1E88E5;
}

#boxB{
  background-color: #00C853;
}

#boxC{
  background-color: #FF6F00;
}

#boxD{
  background-color: #7E57C2;
}

#boxE{
  background-color: #A1887F;
}

jQuery

$(document).ready(function(){
  
     //要素のyポジションを取得（-300は少し早く実行する為）
     const top = [];
     top['boxA'] = $('#boxA').offset().top;
     top['boxB'] = $('#boxB').offset().top - 300;
     top['boxC'] = $('#boxC').offset().top - 300;
     top['boxD'] = $('#boxD').offset().top - 300;
     top['boxE'] = $('#boxE').offset().top - 300;
  
  　//最初の要素だけ最初に表示
     $('#boxA').css('visibility', 'visible');
     $('#boxA').addClass('rotateIn');
  
  
  $(window).scroll(function(){
    
    //スクロール量を取得
    const scroll = $(window).scrollTop();
    
    //スクロールが達したらclassを追加してアニメーション
    
    if(scroll > top['boxB']){
      $('#boxB').css('visibility', 'visible');
      $('#boxB').addClass('rotateIn');
    }
    
      if(scroll > top['boxC']){
      $('#boxC').css('visibility', 'visible');
      $('#boxC').addClass('rotateIn');
    }
    
        if(scroll > top['boxD']){
      $('#boxD').css('visibility', 'visible');
      $('#boxD').addClass('rotateIn');
    }
    
      if(scroll > top['boxE']){
      $('#boxE').css('visibility', 'visible');
      $('#boxE').addClass('rotateIn');
    }
    
   });
});

実装ではfor文で回した方がすっきりします

visibility:hidden

「display:none」でなく「visibility:hidden」なのは要素の位置を取得する為

「visibility:visible」で表示となります

「display:none」で実装するなら、スクロールが最下部に到達してるかを取得する方法などがあります

$(window).scroll(function(){})

スクロールされた時に実行する関数

$(window).scrollTop()

「$(window).scrollTop()」は現在のスクロール量を取得します

 

2019年6月12日Animate.css,CSSライブラリ,CSS,CSSアニメーション

Posted by Yousuke.U