javascript – 如何实现视差滚动?

栏目: JavaScript · 发布时间: 6年前

内容简介:翻译自: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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Art and Science of Java

The Art and Science of Java

Eric Roberts / Addison-Wesley / 2007-3-1 / USD 121.60

In The Art and Science of Java, Stanford professor and well-known leader in CS Education Eric Roberts emphasizes the student-friendly exposition that led to the success of The Art and Science of C. By......一起来看看 《The Art and Science of Java》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具