LPでたまに見るんですが、こういうやつです。
↑ひらいたら下の方にスクロールしていってください。前回の記事でスクロールの途中からグローバルメニューがついてくる
というのを書きましたが、基本的にはそれと同じです。
あらたに使うのは
.animate({'ホニャ','ワンワン'});
だけ
$(function(){$(window).scroll(function () {if($(window).scrollTop() > 100) {$('#move1').animate({'right':'0px'});}});});
scrollまわりは前回と同じです。
条件としては
scrollTop() > 100
上からスクロールが100px以上しているときー、、となります。
#move1がついている画像を、今の位置から、right:0pxの位置まで
スムーズに動かします。
#move1はcssであらかじめ以下のようにしておきます。
#move1{position:absolute;right:-600px;}
right:-600pxからright:0pxまでスムーズに動かす、ということになります。
あとは、同様のものを3パターン作ればOK!
読んでる途中で、タイトルがズドーンと出てきて、目をひくことまちがいなしだ!
サンプルのjqueryの全文はこちら
<script>$(function(){$(window).scroll(function () {if($(window).scrollTop() > 100) {$('#move1').animate({'right':'0px'});}if($(window).scrollTop() > 600) {$('#move2').animate({'left':'0px'});}if($(window).scrollTop() > 1000) {$('#move3').animate({'right':'100px'});}});});</script>