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.
You May Also Like:
- 21 Step-by-Step HTML5 Tutorials to Quickly Get Started
- 40 Best jQuery Plugins Every Web Developer Should Have
- Top 35 Essential jQuery Form Plugins and Libraries You’ll Actually Need
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
Thanks for finally writing about > %blog_title% < Liked it!|
With havin so much written content do you ever run into any issues of plagorism or copyright violation?
My website has a lot of exclusive content I’ve either created myself or outsourced but it looks like a lot of it is popping it up all over the internet without my permission. Do you know any methods to help prevent content from being ripped off? I’d certainly
appreciate it.
Hi everyone, take a look at this list!
http://webdesigninspirationtoday.com/article/444/7-jquery-plugins-for-parallax-scrolling-effect
There is a great parallax plugin over at Territory 3! That is definitely worth checking out.
Here is the link: http://territory3.com/blog/parallax-plugin-using-jquery
Nice post! I think Jarallax library should also be mentioned http://jarallax.com/