jquery-parallax-slider is my first open source jquery plugin and it's sweet!

Sun, May 19, 2013 at 1:04AM

We have noticed that some other web sites are now using multiple animated layers to create a more impressive slideshow.  Some of our upcoming designs are going to use a variety of layered animations to create a more unique home page slideshow.  The last couple days, I build the javascript code needed to make these easier to create and maintain.  Today, I added a ton of features to make it comparable in feature set to many other popular plug-ins.  Mine has it's own unique features that I set out to achieve.  I also learned how to convert it into a jquery plug-in and now it is part of my Jetendo open source projects as a standalone feature.

jquery-parallax-slider Examples:

jquery-parallax-slider documentation page:

jquery-parallax-slider on GitHub:

I implemented all the features from scratch based on a variety of slideshows I've used or seen.  I also demonstrated using the parallax slider with jquery color animation plug-in and the jquery easing plug-ins to enable other effects.

Some third party sites using this kind of technique are:

For now, I just used abstract images and boxes for my examples, but it could be people, places, things, etc.  I may update the example later.

I put about 20 hours into this project so far.  I learned how to integrate with jquery so that it would work like a lot of other popular plug-ins that do slideshows.  If you read the features on the docs, you'll see this plug-in is pretty flexible.  It's responsive (resizable), fast animation, fast loading, compatible with all browsers and lets you design the slides and animation with simple code so you don't need to know much about javascript.

Hope people find and enjoy this free open source (MIT License) plug-in.  If you find bugs or have an idea, contact me through github or this web site.

Bookmark & Share