このエントリーをはてなブックマークに追加

スクロールするとコンテンツがフェイドインする、という仕掛け。ただふわっと出てくるのでなく、もう少し動きを付けたい、ということで、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~を削除。

2016.07.09 投稿 

新しい情報を追記している場合はありますが、古い情報の修正はしていません。投稿日・文中の日付を参照してください。

Recent Articles