Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I get this scroll - triggered effect

Tags:

html

jquery

css

There is this site http://lamoulade.com/#!/home with neat pseudo-animation effect that kicks in when user is scrolling. If i could get a few pointers on what is used in order to achieve that just to push me in the right research direction, I would be most grateful. Thanks in advance

like image 405
Goran Stošić Avatar asked Nov 03 '22 07:11

Goran Stošić


1 Answers

The thing you are looking is called parallax Effect

Some parallax tutorials:

  • http://webdev.stephband.info/parallax.html
  • http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/
  • http://www.richardshepherd.com/smashing/parallax/background.html
  • http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
  • http://www.netmagazine.com/tutorials/building-parallax-scrolling-storytelling-framework
  • http://www.webdesignshock.com/one-page-website/
  • http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
  • http://www.franckmaurin.com/the-parallax-effects-with-jquery/

jQuery parallax plugins:

  • http://webdev.stephband.info/parallax.html
  • http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
  • https://github.com/davecranwell/jQuery-scroll-parallax
  • http://www.davecranwell.com/content/jquery-scroll-parallax-plugin

Some more examples of really nice parallax sites, view source and see what they used:

  • http://www.ok-studios.de/home/
  • http://www.nikebetterworld.com/about
  • http://www.laurentiuswonen.com/jaarverslag2010/
  • http://www.nintendo.com.au/gamesites/mariokartwii/
  • http://2011.beercamp.com/
  • http://www.beetle.com/
  • http://activatedrinks.com/
  • http://www.culturalsolutions.co.uk/
  • http://kalendiar.lenm.cz/
  • http://www.davegamache.com/sandbox/best-of-2010/
  • https://victoriabeckham.landrover.com/INT

Taken From Good Answer from DBUK

like image 86
GajendraSinghParihar Avatar answered Nov 09 '22 10:11

GajendraSinghParihar