我想要一个类似于网站 https://onlycoin.com/ 的 jQuery 鼠标滚动动画效果 [关闭]答案

【问题标题】：I want to have a jQuery mouse scroll animation effect similar to the site https://onlycoin.com/ [closed]我想要一个类似于网站 https://onlycoin.com/ 的 jQuery 鼠标滚动动画效果 [关闭]
【发布时间】：2013-12-19 08:02:19
【问题描述】：

正如标题中提到的，https://onlycoin.com/ 具有平滑的鼠标滚动效果，当我们滚动时卡片会变得动画。

我想实现类似的目标。我已经制作了网页。我没有卡片，而是用手机来制作动画。

任何人都可以帮助我了解我应该如何去做吗？

我已经在页面上完成了 HTML 编码，我真的对 jquery.animate(); 感到困惑。功能。

因此，我知道的唯一参考网站是我在上面发布的那个。

我是 jquery 的新手。感谢您的帮助。

【问题讨论】：

标签： javascript jquery jquery-animate parallax mousewheel

【解决方案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;}

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;
});

【讨论】：

谢谢。这是我一直在寻找的想法。现在，我可以根据自己的设计和效果对其进行自定义。
很高兴我能帮上忙。如果它被认为是您问题的解决方案，请接受带有复选标记的答案:)