我想有類似的網站https://onlycoin.com/

Question

正如標題中提到了一個jQuery鼠標滾動動畫效果，https://onlycoin.com/有當我們滾動卡越來越動畫平滑鼠標滾動效果。

我要實現類似的東西。我做了網頁。而不是卡片，我有移動電話，在那裏動畫。

誰能幫我，我應該怎麼着手辦呢？

我已經做了頁面上的HTML編碼和我對jquery.animate真的很困惑（）;功能。

因此，唯一的參考網站，我知道是我在上面貼了一個。

我在jQuery的新手。 感謝您的幫助。

Answer 1

這是相當困難，爲您提供一個完整的解釋，但我把這個在一起，讓你開始：

http://jsfiddle.net/Ms7gw/

HTML

<div id="container"> 
<div class="box" id="right"></div> 
<div class="box" id="center"></div> 
<div class="box" id="left"></div> 
</div> 

CSS

#container {height: 1000px; width: 1000px; background-color: #000;} 
.box {width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background-color: #ff0000;} 
#right {background-color: #aa0000;} 
#left {background-color: #aa0000;} 

JS

var lastScrollTop = 0; 
var leftBox = $('#left').position(); 
var rightBox = $('#right').position(); 

$(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    $('#right').css({left: rightBox.left + st}); 
    $('#left').css({left: leftBox.left - st}); 
    lastScrollTop = st; 
});