javascript - 根据滚动逐步淡入/淡出

标签 javascript css scroll fade

我有这个 HTML/CSS http://jsfiddle.net/thekillerdev/sB49B/2/

我想做的是几乎像视差卷轴的东西(我认为)。 根据用户滚动的位置,.items 会淡出并淡入下一个。

类似于..

  • 如果用户向下滚动 (scrollTop) 200 像素,则 .item02 将处于不透明度:1,其余部分将处于不透明度:0。
  • 如果用户向下滚动 (scrollTop) 300 像素,则 .item02 的不透明度为 0.5,.item03 的不透明度为 0.5,其余部分的不透明度为 0。

我怎样才能实现这种动画?有什么注意事项吗?

Edit:
jQuery, JS, anykind of language that works in a browser is accepted =]

需要更多信息,我随时提供。

谢谢您的宝贵时间

最佳答案

类似这样的吗?

http://jsfiddle.net/sB49B/18/

关于javascript - 根据滚动逐步淡入/淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10997968/

相关文章:

javascript - IE11+ => 聚焦子 div 导致父滚动到顶部

unit-testing - 使用 Robolectric 对 android listview 滚动进行单元测试

javascript - 禁用 Chrome 的滚动保留功能

javascript - 尝试使用 onclick 函数时,this.state.push 在 ReactJS 上未定义

javascript - vuejs 中的 boolean 在服务器上变为 1

IOS safari 和 chrome css3 bootstrap 悬停图像

html - 在单个页面中处理多个 NgbPagination

html - CSS 使用绝对 div 模糊并保留锐边

javascript - CouchDB 键中的关联数组?

javascript - jQuery fadeOut() 仅当鼠标离开显示的元素时