响应动画页面元素,同时使用JavaScript滚动[编辑:视差滚动](Responsively an

2019-08-02 06:11发布

我敢肯定,这在过去已经长大; 但是我在任期的损失。

在此网页为方形,通过标题为用户滚动“在广场,不同学科合作设计精美,简单的解决方案。”和动画被激活,以正确的页面上说具体点。 当用户滚动背面的图像恢复等。 他们是如何实现这一目标?

2013年8月:所以它已有9个月以来我问这个问题,视差滚动刚刚约运行的过程。 我附加了几个链接对这个问题从如何实现它,为什么要避免它进一步阅读。

视差滚动的例子:


  • 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/

思考:


  • http://curveagency.com/blog/parallax-scrolling-good-bad-and-questionable
  • http://teamhardison.com/wordpress-for-real-estate/parallax-scrolling-really-do-have/
  • http://www.monolithdoes.com/parallax-scrolling-why-or-why-not/
  • http://www.quora.com/search?q=parallax+scrolling

Answer 1:

这就是所谓的视差滚动 。

他们只是检测窗口的位置,然后在窗口滚动到他们设定的任何点应用的jQuery动画。

看到一个深入explination和教程在这里: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

有一个例子,开源GitHub上项目位置: http://prinzhorn.github.com/skrollr/

在我看来,它通常是不好的设计。 我想这可能是微妙的,做得很好,但它往往是分神没有什么实际意义。



文章来源: Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling]