CSS跳转到位置

时间:2014-07-10 20:04:31

标签: javascript jquery html css

我正在查看网站http://charactersf.com/,并试图弄清楚如何 背景图像/内容在前四个"层之间变化"。 当您完全滚动鼠标时,它会一直向下跳跃以对齐图像。 我真的想要更多关于这个主题的阅读,并希望至少找到它所谓的,所以我可以看看自己,谢谢!

3 个答案:

答案 0 :(得分:1)

这可以在Javascript中完成,而不是在CSS中完成。

有关如何在鼠标滚轮滚动事件和块页面滚动中执行代码的信息,请参阅此主题。 Javascript: Capture mouse wheel event and do not scroll the page?

然后我对背景的猜测是你看到的是一个javascript图像滑块插件。因此,当您处于鼠标滚轮事件中时,您可以调用滑块上的功能转到下一个图像。下滑效果是您在插件上设置的幻灯片效果。根据您选择的插件,您可以设置这些选项。不幸的是,我没有关于它们如何使滑块消失以及其他内容在最后一个图像之后以平滑方式出现的情况,但它们以某种方式摆脱滑块并在滚动条滚动时将其带回位置为0。

希望有所帮助!

答案 1 :(得分:0)

您使用的浏览器是什么? Chrome和Firefox都支持f12调试模式。仔细观察,您将看到它们正在绑定鼠标滚动以更改li元素的类。当幻灯片显示时,它的班级将更改为slide active。当它已经滚动滑动时,它会将类更改为slide old。如果它是要显示的幻灯片,则默认情况下其类slide

答案 2 :(得分:0)

这不是一个jquery插件。

它似乎都是自定义的,除了main.js文件之外,标题中没有对任何jquery库的引用。只是滚动事件检测,jquery / css操作的组合。首先是body标签溢出:隐藏,当每张幻灯片都显示时,OnComplete函数会移除溢出:隐藏在body标签中并更改幻灯片DIV的顶部位置以将其向上推。 CSS3用于简化过渡。