情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・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~を削除。