javascript - 滚动一些 div 并同时滚动 body

标签 javascript css scroll

首先我不想在问之前开始尝试这个,我想知道它是怎么做到的:

body{width: 100%; height: 150%; background: url('someimg.png') no-repeat; background-size: 100% 100%}
div{width: 100%; margin-top: 300px; height: 100%; background: red;}//and this div contains other elements so his content became scrollable

现在你知道了一些例子,当你向下滚动时,后面的滚动和前面的滚动一样,但是后面比前面慢很多,就像我向下滚动 30% 我想以 150% 的高度向下滚动30% 和类似 300% 高度的 div 同时向下滚动到他的 30%,所以看起来背景图像也在滚动,但速度较慢。

我想请问你这个用的是什么方式?

 CSS3, JAVASCRIPT or SOMETHING ELSE? OR MIXED? 

最佳答案

好的,所以我认为您正在寻找视差效果。您可以通过使用 jquery 或有时也只是 CSS 自己手动编码来做到这一点,但如果您刚刚开始,这可能会花费很多时间,我建议您使用如下插件:
1. Parallax.js
2. Skrollr
3. Parallax-Scroll
还有更多...只是 google parallax scroll 插件,因为其中一些非常容易使用,可以节省大量时间。

关于javascript - 滚动一些 div 并同时滚动 body,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43165497/

相关文章:

css - Chrome CSS级联

javascript - js。如何隐藏不是 onclick 的选项?需要像显示 :none

javascript - 如何在用户向下滚动到内容时加载内容?

javascript - 根据特定规则获取自定义数组列表的层级顺序

jquery - 在 JQuery Append 之后关闭样式

Android 禁用 webview 滚动但不是内部 ScrollView

javascript - 连接列表的可排序滚动问题

javascript - 比较 Javascript 中指定格式的日期

javascript - 为什么 React 函数组件的 "this"未定义

javascript - 动态调整 jqGrid 添加/编辑表单字段的大小