jquery - 画面の向こうから画像を表示する方法は?

Question

私は画像を持っていますが、実際にはFacebookの「いいね」ボタンが付いた画像になります:)。

ページを一番下までスクロールすると、画面の右側を越えてスライドするようにします。どうやってするの？

もしかしてjquery？しかし、どのように？

Answer 1

leftウィンドウの幅よりも大きなCSS位置を画像に与えます。たとえば jQuery.animate を使用して移動します。

HTML:

<img src="http://www.vpul.upenn.edu/platthouse/files/FB_button_1.jpg">

CSS:

img {
  position: absolute;
  left: 1000px;
}
body{
  overflow: hidden;
}

JS:

setTimeout(function(){$('img').animate({left: 10}, 500)}, 1000);

例：

jsfiddle

Answer 2

このjsfiddleはあなたが望むことをすると思います。

いいねボタンは、ユーザーが 100 ピクセル下にスクロールしたときに jQuery によってアニメーション化され、(よく忘れられていることですが) ユーザーが上にスクロールすると再び非表示になります。

$(document).ready(function () {
    var like = $('#fblike');

    $(window).scroll(function () {
        if ($(document).scrollTop() > 100) {
            like.animate({
                opacity: 1,
                right: 5
            }, 300);
        }
        else {
                like.animate({
                opacity: 0,
                right: -60
                }, 200);
        }        
    });
});​