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>