Animate.css + inView.js 【サンプル】

viva

wow.jsは１回オンリーに対し、inView.jsは描画域に入るたび動作します。

ただ、wow.jsはコードがシンプルなのに対し、 inView.jsにすると、少しコードが複雑化しちゃうので、 シンプルに使えるように書いてみました。

JavaScriptがよく分かってないので良い書き方があれば教えてください…。

※data-timeはミリ秒を入れることで実行を遅延できるようにしてます。

See the Pen Animate.css + inView.js [Sample] by inou-e (@inou-e) on CodePen.


使用方法：

animate.css

inview.js

を読みこみます。

任意のJSファイルを作成し、下記を記述　script.js

$(function(){
	var t;
	var ani;
	$('.iv').on('inview', function(event, isInView) {
		if (isInView) {
			t = $(this).attr("data-time") ? $(this).attr("data-time") : 0;
			$(this).delay(t).queue(function(){
				ani = $(this).attr("class").match(/iv\-([A-Za-z]+)/);
				$(this).addClass('animated '+ani[1]);
				$(this).css('opacity',1);
			});
		} else {
			ani = $(this).attr("class").match(/iv\-([A-Za-z]+)/);
			$(this).removeClass('animated '+ani[1]);
			$(this).css('opacity',0);
			$(this).dequeue();
		}
	});
});

アニメーションさせたいオブジェクトに以下のようにクラスを追加します。
class=”iv iv-【animate.cssのクラス名】”

例：Animate.cssのbounceを追加する場合
class=”iv iv-bounce”

例：1秒遅延させる場合
data-time=”1000″

<*** class=”iv iv-bounce” data-time=”1000″>

viva

More Posts