【发布时间】：2014-07-10 20:04:30
【问题描述】：
我正在查看网站 http://charactersf.com/ 并试图弄清楚 背景图像/内容在前四个“层”之间变化。 当您完全滚动鼠标时，它会一直向下跳以对齐图像。 我真的很想多读一些关于这个话题的书，希望至少能找出它的名字，这样我就可以自己看看了，谢谢！
【问题讨论】：
-
这是视差效果
标签： javascript jquery html css
【发布时间】：2014-07-10 20:04:30
【问题描述】：
这将在 Javascript 中完成，而不是在 CSS 中。
请参阅此主题，了解如何在鼠标滚轮滚动事件中执行代码并阻止页面滚动。 Javascript: Capture mouse wheel event and do not scroll the page?
那么我对背景的猜测是，您看到的是一个 javascript 图像滑块插件。因此，当您处于鼠标滚轮事件中时，您将调用滑块上的函数以转到下一个图像。滑下效果是你在插件上设置的幻灯片效果。根据您选择的插件，您可以设置这些选项。不幸的是，我没有关于它们如何使滑块消失并且其他内容在最后一张图像之后以平滑方式出现的答案，但是如果您在滚动条位置为时向上滚动，它们会以某种方式摆脱滑块并将其带回来0.
希望有帮助！
【讨论】：
你用的是什么浏览器？ Chrome 和 Firefox 都允许 f12 调试模式。仔细观察，您会发现它们将鼠标滚动绑定到更改 li 元素的类。当幻灯片应该显示时，它的类更改为slide active。当它已经滚动过幻灯片时，它会将类更改为slide old。如果它是一张仍要显示的幻灯片，它的类默认为slide。
【讨论】：
这不是一个 jquery 插件。
这似乎都是自定义的，除了 main.js 文件之外，标头中没有对任何 jquery 库的引用。只是滚动事件检测、jquery/css 操作的组合。首先body标签是overflow:hidden，当每张幻灯片都显示出来时，一个OnComplete函数会从body标签中移除overflow:hidden，并改变slides DIV的顶部位置以将其向上推。 CSS3 用于缓和过渡。
【讨论】：