使用JavaScript進行滾動時，頁面元素響應動畫[EDIT：Parallax Scrolling]

Question

我確信這已經成爲過去;不過，我一直在虧損。

在這個正方形的web page上，用戶滾動瀏覽標題爲「在方形，不同學科協作設計精美簡單解決方案」的部分，並在該頁面的特定點處右側激活動畫。隨着用戶向後滾動圖像還原等。他們如何實現這一目標？

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/

思考：

---

• 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

它被稱爲parallax scrolling。

他們只是檢測窗口的位置，然後應用jQuery的動畫，當窗口滾動到他們設置的任何點。

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

有一個例子，開源GitHub上項目位置：http://prinzhorn.github.com/skrollr/

在我看來，這通常是不好的設計。我認爲它可以微妙並且做得很好，但它往往會分散注意力，因爲沒有真正的目的。