我确定这个问题过去已经被提出过,但是我对一个术语感到困惑。
在这个网页上,用户滚动浏览标题为“At Square, different disciplines collaborate to design beautifully simple solutions.”的部分时,动画会在页面的特定位置向右激活。当用户向后滚动时,图像会恢复原状,依此类推。他们是如何实现这一点的?
2013年8月:自从我问了这个问题以来已经过去了九个月,视差滚动已经基本完成。我附上几个链接供进一步阅读,涵盖了从如何实现到为什么要避免使用它的各个方面。
视差滚动的示例:
- http://en.wikipedia.org/wiki/Parallax_scrolling
- http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
- http://www.cloudberrycreative.com/blog/6-sites-that-get-parallax-scrolling-right/
教程:
- http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
- http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
- http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
- http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
想法: