Jquery Inview

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

スクロールするとコンテンツがフェイドインする、という仕掛け。ただふわっと出てくるのでなく、もう少し動きを付けたい、ということで、jquery.inview を実装してみた。

$(function() {
	$('.fadein-rise').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
		if(isInView){
			$(this).stop().addClass('rise');
		}
		else{
			$(this).stop().removeClass('rise');
		}
	});
});

として、

.fadein-rise {
	opacity: 0;
	transform: translate(0,120px); 
	-webkit-transform: translate(0,120px); 
}
.rise {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

これで、下から上に移動しながらフェイドイン。さらに

ul.grid .fadein-rise:nth-of-type(2) {
    -moz-transition-delay:200ms;
    -webkit-transition-delay:200ms;
    -o-transition-delay:200ms;
    -ms-transition-delay:200ms;
    }
ul.grid .fadein-rise:nth-of-type(3) {
    -moz-transition-delay:400ms;
    -webkit-transition-delay:400ms;
    -o-transition-delay:400ms;
    -ms-transition-delay:400ms;
    }

として、左から順にフェイドインするように。

上から下にスクロール時に一度だけフェイドインさせたい場合は　else～を削除。