JavaScriptを使用してスクロールするときにページ要素をアクティブにアニメーション化する[編集：パララックススクロール]

Question

これは過去に育ったと確信しています。しかし、私は言葉を失っている。

このweb pageの正方形の場合、ユーザーは「スクエアで、さまざまな分野が協力して美しくシンプルなソリューションを設計します」というタイトルのセクションをスクロールし、アニメーションがページ上の特定のポイントで右にアクティブになります。ユーザーがスクロールバックするにつれて、画像は元に戻ります。彼らはどのようにこれを達成していますか？

AUG 2013：この質問をしてから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

それはparallax scrollingと呼ばれています。

ウィンドウの位置を検出してから、ウィンドウがスクロールされたときにjqueryアニメーションが適用されます。

は、綿密explinationを参照してください、ここでチュートリアル：http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

ここで例とオープンソースGitHubのプロジェクトがあります：私の意見ではhttp://prinzhorn.github.com/skrollr/

それは通常悪いデザインです。私はそれが微妙でうまくいくかもしれないと思うが、それは実際の目的のためにしばしば気を散らす。