スクロール量に応じて、横からコンテンツが出てくる
よくある「スクロール量に応じて、横からコンテンツが出てくる」あれです。今ドキっぽい。
$(function(){ $('.box p').addClass('move'); $(window).scroll(function(){ $(".box").each(function(){ var imgPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > imgPos - windowHeight + windowHeight/5){ $(this).find("p").removeClass('move'); } else { $(this).find("p").addClass('move'); } }); }); });
左からふわっと表示
文章が左から出てきまーす。
文章が左から出てきまーす。
文章が左から出てきまーす。
<div class="box"> <p> 文章が左から出てきまーす。<br> 文章が左から出てきまーす。<br> 文章が左から出てきまーす。<br> </p> </div>
.box p { -webkit-transition: all 1s; -webkit-transform: translate(0, 0); opacity: 1; } .box p.move { -webkit-transform: translate(-10px, 0); opacity: 0; }
右からふわっと表示
今度は右から出てきまーす。
今度は右から出てきまーす。
今度は右から出てきまーす。
<div class="box"> <p class="text_right"> 今度は右から出てきまーす。<br> 今度は右から出てきまーす。<br> 今度は右から出てきまーす。<br> </p> </div>
.box p { text-align: right; -webkit-transition: all 1s; -webkit-transform: translate(0, 0); opacity: 1; } .box p.move { -webkit-transform: translate(10px, 0); opacity: 0; }
中央から拡大しながらふわっと表示
センターどーん!
<div class="box"> <p class="text_center"> センターどーん! </p> </div>
.box p { text-align: center; -webkit-transition: all 1s; -webkit-transform: scale(1.0); opacity: 1; } .box p.move { -webkit-transform: translate(0, 0) scale(0.5); opacity: 0; }
jQueryだけでも実装可能だが、javascript無効環境も考慮すると
classの操作に留めた方が無難か・・・。