html - Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling] - Stack Overflow

admin管理员组

文章数量:1345115

I'm certain this has been brought up in the past; however I'm at a loss for a term.

On this web page for square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and the animation is activated to the right at that specific point on the page. As the user scrolls back the image reverts and so on. How are they achieving this?

AUG 2013: So it's been nine months since I've asked this question and parallax scrolling has just about run it's course. I'm attaching several links for further reading on this subject ranging from how to achieve it to why to avoid it.

Examples of parallax scrolling:

---

• .html
• /

Tutorials:

---

• /
• /
• /
• /

Thoughts:

---

• /
• /
• +scrolling

I'm certain this has been brought up in the past; however I'm at a loss for a term.

On this web page for square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and the animation is activated to the right at that specific point on the page. As the user scrolls back the image reverts and so on. How are they achieving this?

AUG 2013: So it's been nine months since I've asked this question and parallax scrolling has just about run it's course. I'm attaching several links for further reading on this subject ranging from how to achieve it to why to avoid it.

Examples of parallax scrolling:

---

• http://en.wikipedia/wiki/Parallax_scrolling
• http://www.awwwards./20-best-websites-with-parallax-scrolling-of-2013.html
• http://www.cloudberrycreative./blog/6-sites-that-get-parallax-scrolling-right/

Tutorials:

---

• http://tympanus/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
• http://tympanus/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
• http://net.tutsplus./tutorials/html-css-techniques/simple-parallax-scrolling-technique/
• http://webdesign.tutsplus./tutorials/plete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Thoughts:

---

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

• javascript
• html
• css
• parallax

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Nov 2, 2012 at 18:45 Ryan RichRyan Rich 12.1k88 gold badges2424 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

It is called parallax scrolling.

They just detect the window position and then apply a jquery animation when the window is scrolled to whatever points they set.

See an in-depth explination and tutorial here: http://coding.smashingmagazine./2011/07/12/behind-the-scenes-of-nike-better-world/

There is an example and opensource GitHub project here: http://prinzhorn.github./skrollr/

In my opinion it is normally bad design. I suppose it can be subtle and done well but it often is distracting for no real purpose.

本文标签：