pochiplus

WEB MEMO & LIFE BLOG

WEB

jQuery:スクロールすると画像が左からでてくる

投稿日:2015.2.19 更新日:


スクロールしている間ではなく一定距離スクロールすると表示

というパターンで作成。

html

<div id="pagetop"></div>

css

#pagetop{
	position: fixed;
	opacity: 0;
	width: 400px;
	height: 500px;
	top: 200px;;
	background: url(images/usagi.png);
}

javascript

$(function() {
    var pagetop = $('#pagetop');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {    //どの位置に画面がきたら動かすか
            pagetop.stop().animate({'left': '0','opacity':'1'}, 500); //500ミリ秒かけて left0へ移動し、透明度を100%にする。
        } else {
            pagetop.stop().animate({'left': '-55px','opacity':'0'}, 500);
        }
    });
});

画像が左から出る

一応、これで完成。
デモを貼るのってどうやってるんだろう。もうほんと、わからない事だらけ。

参考にしたサイト

jQuery:スクロールで表示されるページトップの実装方法

jQueryでスクロールすると表示する系いろいろ

-WEB
-,

Copyright© pochiplus , 2018 All Rights Reserved Powered by AFFINGER4.