HTML5 / Javascript 对单个元素 / div 标签的视差效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12008950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 / Javascript Parallax Effect on single elements / div tags?
提问by matt
I have created a few sites in the past with the scrolldeck.js that have the standard full screen background with one layer ontop and text (the standard scroll parallax style) this is not what I am looking for.
我过去使用 scrolldeck.js 创建了一些站点，这些站点具有标准的全屏背景，顶部有一层和文本（标准滚动视差样式），这不是我想要的。
Im looking for a script or tutorial (or examples) for having a single div tag (image) in the foreground animate/move as you scroll. I will be using this on a one page vertical scrolling site, so as your scrolling I would like the odd image to scroll in at a different speed and have a start and stop position. I dont want the entire background on parallax.
我正在寻找一个脚本或教程（或示例），以便在滚动时在前景动画/移动中具有单个 div 标签（图像）。我将在一页垂直滚动站点上使用它，因此当您滚动时，我希望奇数图像以不同的速度滚动并具有开始和停止位置。我不想要视差的整个背景。
Thanks a bunch in advance
提前致谢
EDIT: Here is a better explanation of what Im looking for:
编辑：这是对我正在寻找的更好的解释：
Picture scrolling down a page, as you scroll you see a bottle thats floating (transparent png), you continue to scroll down reading content and at a certain point that bottle rests nicely on a table (part of background) as you keep scrolling it will no longer move.
图片向下滚动页面，当您滚动时，您会看到一个漂浮的瓶子（透明 png），您继续向下滚动阅读内容，并且在某个点，瓶子会很好地搁在桌子上（背景的一部分），因为您继续滚动它会不再移动。
Pretty well the goal is to have elements (images) move into pre-determined positions (based on scrolling) and then stay put once they get to their final resting position.
很好的目标是让元素（图像）移动到预先确定的位置（基于滚动），然后在它们到达最终静止位置后保持原状。
EDIT 2: Here are some example sites:
http://jessandruss.us/- this site does exactly what I want about 2/3 of the way down at this point: see screenshot
http://smokeybones.com/- the burger pretty well does the effect I want, minimal but it moves into position as you scroll.
编辑 2：以下是一些示例网站：
http:
//jessandruss.us/- 这个网站在这一点上做了我想要的大约 2/3 的事情：看截图
http://smokeybones.com/- 汉堡我想要的效果非常好，最小但它会随着您滚动而移动到位。
采纳答案by Robin Maben
Based on your comment but hopefully at a different pace then the actual page scrolls creating a parallax effect.- I tried to simulate that effect.
根据您的评论but hopefully at a different pace then the actual page scrolls creating a parallax effect.- 我试图模拟这种效果。
Basically, the moving object travels at the same rateat which the page scrolls but covers a different distanceproportional to the viewport (visible area)
基本上，移动对象的移动速度与页面滚动的速度相同，但覆盖的距离与视口（可见区域）成正比
Note: Use the scrollbar handle instead of the mouse wheel.
注意：使用滚动条手柄而不是鼠标滚轮。
回答by Kostia
http://prinzhorn.github.com/skrollr/
http://prinzhorn.github.com/skrollr/
This library is a native javascript (no need for jQuery etc.) parallax scrolling plugin. The plugin homepage has an actual demo of what you are looking for. Github repo is here.
这个库是一个原生的 javascript（不需要 jQuery 等）视差滚动插件。插件主页有您正在寻找的实际演示。Github 仓库在这里。
回答by user1555320
you should look at the source of https://victoriabeckham.landrover.com/INTbasically ther's a 'player' that handles some css properties that gives the parallax effect that you want to achieve; mainly is't matter of background-position alla the elements that should have such treatment are into a
您应该查看https://victoriabeckham.landrover.com/INT的来源， 基本上有一个“播放器”可以处理一些 css 属性，从而提供您想要实现的视差效果；主要不是背景位置的问题，应该有这种处理的元素变成了
回答by Decker W Brower
I think that you would benefit from this book: Supercharged Javascript Graphicsit has plenty of tutorials and useful information. I personally learned a lot from it. here is a link to one of the examples from the book to wet your appetite here.and you can visit the authors website for more cool stuff here.
我认为你会从这本书中受益：Supercharged Javascript Graphics它有大量的教程和有用的信息。我个人从中学到了很多。这是书中一个例子的链接，可以在这里满足你的胃口。你可以在这里访问作者的网站以获取更多很酷的东西。
回答by yckart
Give jQuery Transea chance.. There are some super simple demos(no documentation yet) and it works even with touch devices. However, I've to say, that it is an early beta version, so be careful.
给 jQuery Transe一个机会。有一些超级简单的演示（还没有文档），它甚至可以与触摸设备一起使用。但是，我不得不说，这是一个早期的测试版，所以要小心。
BTW: It has only 8.682 kb
顺便说一句：它只有 8.682 kb
