javascript – 如何实现视差滚动？
栏目: JavaScript · 发布时间: 7年前
内容简介：翻译自：https://stackoverflow.com/questions/15021405/how-to-implement-parallax-scrolling
这是链接供参考
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube如果我们滚动中心部分,在这个站点中心和右侧部分都滚动一次…
我完成了与此代码相同： –
这是HTML代码： –
<div id="left" class="linked"> <img height="600" src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg"> </div> <div id="right" class="linked"> <img src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg"> </div><br>
脚本：-
$(function(){
$('.linked').scroll(function(){
$('.linked').scrollTop($(this).scrollTop());
})
})
CSS： –
<br>#left { width: 300px; height: 400px; overflow: scroll; float: left; }
#right { width: 300px; height: 400px; overflow: scroll; float: left; }
但我有一点点问题.
在上面的网站都滚动一次,但右侧是滚动慢如何工作….？
请帮我…
http://jsfiddle.net/cuVC7/0/
请看一下这个解决方案.虽然不是很普遍,但它可以给你一个很好的开始.当您在小提琴的CSS部分中更改其高度时,右侧div的速度会自动调整.
应该注意的是,像这样的2D视差相关问题需要基本数学知识.上面的示例使用此模型：
>确定页面的滚动,这样我们就知道滚动了多少div.
>使用页面高度,窗口高度和左侧div高度的知识来计算相对滚动.也就是说,从0到1的值向我们显示页面是否完全没有滚动,滚动了一些量,或滚动到结尾.
>根据窗口大小将关联滚动映射到慢层的尺寸,以确定慢层的精确滚动.
翻译自：https://stackoverflow.com/questions/15021405/how-to-implement-parallax-scrolling
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
