Parallax scrolling is a technique that the background images move by the camera slower than foreground images, which can give the viewer a 3D/motion illusion. It was firstly used in the video game and started to appear in some fancy web design works recently. If your website is already awesome, adding one extra parallax effect would easily give visitors a bigger impression. To make your life easier, there are some excellent plugins and tutorials to get started. They are well written and documented and you might just add a few your own pictures and automatically have a parallax page.
jQuery Parallax Plugins:
1. Stella.js
Stella makes it easy to create parallax scrolling websites. The documentation is very straightforward. To get started, you just have to add some sample data and call functions like stellar().
2. Super Scrollorama
Super awesome plugin to make element appear or disappear at certain time when scrolling.
3. jQuery Scroll Path
No more vertical scrolling. With jQuery scroll path, you can define heaps of path the elements gonna scroll through. Creating a kick-ass site made easier.
4. Curtain.js
This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.
5. Plax
Plax enables you to create parallax effects that can be triggered when mouse hover and moving. Motion detected!
6. Scrolldeck
Pretty straightforward plugin to make simple scrolling presentation, which takes each slide as a div.
7. jParallax
jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.
8. Spritely
Spritely is a lightweight plugin with a few simple methods for creating animated sprites and dynamic scrolling backgrounds.
jQuery Parallax Tutorials:
1. Create a Parallax Scrolling Website Using Stellar.js
2. Build a Parallax Scrolling Website with jQuery and CSS
3. Behind The Scenes Of Nike Better World
4. Recreate a Nike Better World Parallax Effect
5. One Page Website with Vertical Parallax
6. The Parallax Effects with jQuery
7. jQuery Parallax Tutorial – Animated Header Background
Nice jquery and plugins.
ReplyDeleteNice Collection!! Here is a simple tutorial on how to make parallax website. http://webavenue.com.au/parallax-website-tutorial/
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThese websites are all beautiful but unfortunately they are anti-seo.
ReplyDeleteSEO parallax sites can be done but unfortunately the market seems to forget about SEO. We did and SEO Parallax Scrolling website. You can see it here. http://www.posicionamientowebenbuscadores.com
We used parallax scrolling as a design concept to be applied to each URL rather than putting the whole website on one URL.