jquery.inviewとAnimate.cssでスクロール時にアニメーションを追加するコードを汎用的にする

Animate.cssのアニメーションを、jquery.invewプラグインを利用して表示された時に発火させるというものです。jquery.invew側でAnimate.cssのアニメーションを一つ一つ登録して利用することも可能ですが、コードが冗長的になってしまいます。

そこでdata属性を利用してanimate__animatedクラスがある時にdata属性にあるanimate__{animationName}を追加するように記述することで汎用的に利用できます。

<div  class="animate__animated" data-animate="animate__zoomIn"></div>
$( '.animate__animated' ).on( 'inview', function( event, isInView ) {
	if ( isInView ) { //表示領域に入った時
		const animateName = $( this ).data( 'animate' );
		$( this ).addClass( animateName );
	}
} );

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。