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

jQuery Parallax Plugins and Tutorials
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

jQuery Parallax Plugins and Tutorials
Super awesome plugin to make element appear or disappear at certain time when scrolling.

3. jQuery Scroll Path

jQuery Parallax Plugins and Tutorials
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

jQuery Parallax Plugins and Tutorials
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

jQuery Parallax Plugins and Tutorials
Plax enables you to create parallax effects that can be triggered when mouse hover and moving. Motion detected!

6. Scrolldeck

jQuery Parallax Plugins and Tutorials
Pretty straightforward plugin to make simple scrolling presentation, which takes each slide as a div.

7. jParallax

jQuery Parallax Plugins and Tutorials
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

jQuery Parallax Plugins and Tutorials
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

jQuery Parallax Plugins and Tutorials

2. Build a Parallax Scrolling Website with jQuery and CSS

jQuery Parallax Plugins and Tutorials

3. Behind The Scenes Of Nike Better World

jQuery Parallax Plugins and Tutorials

4. Recreate a Nike Better World Parallax Effect

jQuery Parallax Plugins and Tutorials

5. One Page Website with Vertical Parallax

jQuery Parallax Plugins and Tutorials

6. The Parallax Effects with jQuery

jQuery Parallax Plugins and Tutorials

7. jQuery Parallax Tutorial – Animated Header Background

jQuery Parallax Plugins and Tutorials
Courtesy:http://medleyweb.com/web-dev/15-useful-jquery-parallax-plugins-and-tutorials/

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. These websites are all beautiful but unfortunately they are anti-seo.
    SEO 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.

    ReplyDelete

 
Top