单个元素/ div标签的HTML5 / Javascript视差效果？

我在过去创建了一些网站,其中scrolldeck.js具有标准的全屏幕背景,其中有一层ontop和文本(标准滚动视差样式),这不是我想要的.

我正在寻找一个脚本或教程(或示例),以便在滚动时在前景中设置单个div标签(图像)动画/移动.我将在一个页面的垂直滚动网站上使用它,所以当您滚动我希望奇数图像以不同的速度滚动并具有开始和停止位置.我不想要视差的整个背景.

提前感谢一堆

编辑：这是我正在寻找的更好的解释：

图片向下滚动页面,滚动时你看到一个漂浮的瓶子(透明png),你继续向下滚动阅读内容,并且在某个点上,当你继续滚动它时,瓶子会很好地放在桌子上(背景的一部分)不再动了.

很好的目标是让元素(图像)移动到预定位置(基于滚动),然后在它们到达最终静止位置时保持放置.

编辑2：以下是一些示例网站：

http://jessandruss.us/ – 这个网站完全符合我想要的关于此时的2/3：see screenshot

http://smokeybones.com/ – 汉堡很好地完成了我想要的效果,最小但是当你滚动时它会移动到位.

解决方法

根据您的评论,但希望以不同的速度,然后实际页面滚动创建视差效果. – 我试图模拟那种效果.

基本上,移动物体以与页面滚动相同的速率移动但覆盖与视口(可见区域)成比例的不同距离

DEMO here.

注意：使用滚动条手柄而不是鼠标滚轮.

原文地址：https://www.jb51.cc/css/216014.html