parallax-scrolling

The 15 Best jQuery Parallax scrolling Tutorials

If you want to add a parallax scrolling effect to your web pages in an easy way, search no more. Keep using this wonderful roundup to learn how to create your own parallax effect from scratch. The following parallax scrolling tutorials will do a lot of the work for you. 

You May Also Like:

How to make parallax scrolling website responsive

Here is a step by step guide to turn parallax scrolling off for mobile and touch devices using enquire.js.

parallax-scrolling

Tutorial | Demo

Create a Cool Website with Fancy Scrolling Effects

In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.

parallax scrolling tutorial

Tutorial | Demo

Create a Parallax Scrolling Website Using Stellar.js

In this tutorial I’m going to show you how you can create the parallax effect on your own website, with a bit of imagination and a little help from Stellar.js.

Parallax-Scrolling

Tutorial | Demo

Creating a Parallax Scrolling Webpage Using Jarallax.js

In this tutorial we will be creating a single page based on this Parallax Scrolling effect using a JavaScript library called Jarallax.js.

Parallax-Scrolling

Tutorial | Demo

Build a Parallax Website

In this tutorial you will learn how to  build a simple parallax website using few lines of javascript code and css.

Parallax-Website

Tutorial | Demo

Jazz up a Static Webpage with Subtle Parallax

In this tutorial we’re going to put together a simple responsive layout, then with the help of skrollr.js, we’ll apply a subtle parallax effect to the header.

parallax effect

Tutorial

Simple parallax scrolling tutorial

In this tutorial you will learn to setup html to animate background image at a different speed and page scrolling.

parallax-scrolling-tutorial

Tutorial | Demo

How to create a parallax scrolling website

In this parallax website tutorial you will learn how to create a simple parallax scrolling website using Skrollr.js plugin.

parallax scrolling tutorial

Tutorial | Demo

Parallax Content Slider with CSS3 and jQuery

A simple parallax content slider with different animations for each slider element and a background parallax effect.

Parallax-Content-Slider

Tutorial | Demo

A Simple Parallax Scrolling Technique

In this tutorial, you’ll learn a simple parallax scrolling technique you’ve ever came across.

Parallax-Scrolling-Effect

Tutorial | Demo

CSS3 Parallax scrolling slider

Learn how to apply parallax effect for vertical slider. We won’t use javascript, but only pure css3 properties.

Parallax-scrolling

Tutorial | Demo

Parallax Slider with jQuery

In this image slider tutorial we will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.

jQuery-Parallax-Slider

Tutorial | Demo

Fluid CSS3 Slideshow with Parallax Effect

In this tutorial you will learn to create a slideshow with a parallax effect using several CSS3 properties.

CSS3-Slideshow

Tutorial | Demo

One page website, vertical parallax

In this tutorial we’re going to create something inspired by Nike’s website using jQuery and CSS. You will find both the logical part and the programming section to understand the mechanism of this page and then proceed making your own Nike-like navigation.

One-page-website

Tutorial | Demo

Scrolling Parallax

Scrolling tutorial

Tutorial | Demo

banner
Tags:
15 shares
My name is Sarah Sparkle, a Web and Graphic designer. I am passionate about all things design related including web, character, and graphic design.
Previous Post

The 30 Best WordPress Widgets & Plugins

Next Post

30+ Brilliant Black Wallpapers

  1. June 22, 2014

    Excellent collection, Just loved it. I will try some of it on my next project :). Thanks

  2. Aysanlearn
    October 19, 2014

    Very nice

Leave a Reply

Your email address will not be published. Required fields are marked *