Design, CG Graphics & Inspiration
Parallax Scrolling: Tools, Articles and Tutorials

Parallax Scrolling: Tools, Articles and Tutorials

In our previous post dedicated to parallax scrolling effect, New Websites with Parallax Scrolling, we’ve already described the principle of its work. And today we would like to present to your attention some resources with the help of which the parallax scrolling can be achieved. Here we’ve gathered jQuery plugins, articles and informative tutorials. In case you know any useful sources on this topic, please don’t hesitate to share with us via the comments.

jQuery plugins

jQuery Parallax Image Slider

Custom jQuery Plugin for Creating Parallax Effect Image Sliders.
jQuery Parallax Image Slider in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

Jquery Image Parallax

The jQuery Image Parallax project is a plugin that gives an illusion of depth to an image with transparency (PNG, GIF) by repeating it and animating movement.
Jquery Image Parallax in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
Scrolling Parallax: A jQuery Plugin in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

Scrollorama

The jQuery plugin for doing cool scrolly stuff.
Scrollorama in Parallax Scrolling: Tools, Articles and Tutorials
Download

Scrolldeck

A jQuery plugin for making scrolling presentation decks.
Scrolldeck in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

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.
jParallax in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

Stellar.js

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.
Stellar.js in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

jQuery Scroll Path

A jQuery plugin for defining a custom path that the browser follows when scrolling.
jQuery Scroll Path in Parallax Scrolling: Tools, Articles and Tutorials
Demo | Download

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.
Curtain.js in Parallax Scrolling: Tools, Articles and Tutorials
Download

Plax

Plax is a jQuery / Ender plugin that makes it suuuuuper easy to parallax elements in your site based on mouse position. You can see it implemented in many places throughout GitHub, including the 404 page, the 500 page, and the about page.
Plax in Web Design Inspirational Cocktail #5
Demo | Download

Articles and Tutorials

Parallax Slider With jQuery

Parallax Slider With jQuery in Parallax Scrolling: Tools, Articles and Tutorials
Demo

Building a parallax scrolling storytelling framework

Building a parallax scrolling storytelling framework in Parallax Scrolling: Tools, Articles and Tutorials
Demo

jQuery Parallax Tutorial – Animated Header Background

In this tutorial i will explain in detail how to create your own parallax background effect using jQuery to manage the animation aspects of the banner which you could use for your header background.
jQuery Parallax Tutorial – Animated Header Background in Parallax Scrolling: Tools, Articles and Tutorials
Demo

Create a funky parallax background effect using jQuery

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.
Create a funky parallax background effect using jQuery in Parallax Scrolling: Tools, Articles and Tutorials
Demo

Build a parallax scrolling website interface with jQuery and CSS

Parallax scrolling website interfaces have been popping up all over the place recently. I didn’t want to miss out on the fun, so I have put together a parallax scrolling demo built using jQuery and CSS.
Build a parallax scrolling website interface with jQuery and CSS in Parallax Scrolling: Tools, Articles and Tutorials
Demo

The 3D Parallax Effect

The 3D Parallax Effect in Web Design Inspirational Cocktail #5
Demo

You might also be interested in..

New Websites with Parallax Scrolling

  • AndrewG,
  • February 18, 2012

SHARE THIS POST

Andrew is the chief editor of Splashnology blog. He has many years of experience within the web design industry and has a passion for the latest web technologies. 3D Models Marketplace

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • http://www.paulund.co.uk/ Paul

    Thanks for this list really like the look of Scrollorama I really need to give that a go sometime.

  • Syam S.R

    Really Great Article , Thanks and
    Awesome…

    I had surfed a lot of time in internet for these stuff at last i got it …

    Thanks a lot………………………

  • http://www.pollenbrands.com/ John

    I was having a nervous breakdown about an upcoming project and this totally chilled me out – thanks so much for the resources!

  • Pingback: WEBSITE REFERENCE « hweb87

  • http://mintik.com/ mintik

    Very useful collection. Thanks :)