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

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

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

HTML

<div  class="animate__animated" data-animate="animate__zoomIn"></div>

jQuery

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