Best jQuery Parallax Plugins & Tutorials with Demo

    jQuery True Panorama

    jQuery True Panorama

    True Panoroma with jQuery have following features :

    • 100% Responsive.
    • 100% Mobile Friendly.
    • Touchscreen support, mouse move/drag/wheel.
    • Mobile tilt support.
    • External control.
    • Modal window support.
    • Parallax cross-linking support.
    • Requires no knowledge to use.
    • Cross browser compatibility.

    Cool kitten : A jQuery Parallax scrolling responsive framework

    Cool kitten : A jQuery Parallax scrolling responsive framework

    A parallax scrolling responsive framework with jQuery.It is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.The best way to have a website with abilities to be viewed in every computer, tablet and mobile.The last web trend! It makes a beautiful visual effect that brings a second life to every slide.

    FractionSlider : jQuery parallax slider plugin

    FractionSlider : jQuery parallax slider plugin

    FractionSlider is a jQuery plugin for image/text-sliders.It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and css (every html-element can be animated).

    Scrolly : a simple jQuery parallax plugin

    Scrolly : a simple jQuery parallax plugin

    Super simple and easy to use parallax plugin for jQuery.

    Parallaximus : jQuery Responsive 3D Parallax Widget

    Parallaximus : jQuery Responsive 3D Parallax Widget

    Easy to use javascript plugin which allows you to decorate your site with responsive 3d parallax widgets (banners), each of which is a pleasure to interact with not only on desktop browsers but also on modern mobile devices.

    Features:

    • Cool 3D effects. Parallaximus uses CSS3 3d transforms for all browsers that qualitatively support them.
    • Responsive design. Widget size can be dynamically changed down to mobile devices in two different ways.
    • Playful mobile support. Totally new way to interact with parallax widget on modern mobile devices.
    • onMouseout centering easing. Smooth levelling animation when mouse leaves Parallaximus.
    • Cross-browser & cross-platform. IE7+, Firefox, Chrome, Opera. Windows, iOS, Linux.
    • Unminified Source. You will recieve full unminified version of js code.
    • Remote controlling with API. Options and API are well-documented and easy to use.

    jQuery Scroll Content Presenter with CSS3

    jQuery Scroll Content Presenter with CSS3

    It is an extension that allows you to create an unique and beautiful style of navigation , showing the contents of your site through animations and colors to engage your visitors. Scroll Content Presenter builds the navigation menu for you based on the structure of your HTML.

    Features:

    • Vertical and horizontal navigation
    • Custmom scroll
    • Parallax animation
    • CSS3 transitions
    • Built using bootstrap
    • Generate navigation menu for you

    Create a Cool Website with Fancy Scrolling Effects in jQuery

    Create a Cool Website with Fancy Scrolling Effects in jQuery

    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.This tutorial will be a walkthrough of my design process for a simple portal site that presents all of my websites and social profiles. Each website has its own individual section in a series of ‘slides’ laid out vertically. With the help of some cool jQuery plugins clever scrolling and parallax illusions are added to inject an element of fun and novelty to the site.

    Merry Scrolling with skrollr.js

    Merry Scrolling with skrollr.js

    A step-by-step tutorial on how to create a beautifully looking Christmassy scrolling effect by Paulina Hetman from Pepsized.skrollr is much more than “just” parallax scrolling. It’s a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. But I wanted to sound hip and use some buzz-words. By the way, skrollr leverages HTML5 and CSS3.

    skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top scroll offset.

    A Simple Parallax Scrolling Technique with jQuery & CSS3

    A Simple Parallax Scrolling Technique with jQuery & CSS3

    Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it.

    Destaque : jQuery slideshow plugin with built-in parallax effect

    Destaque : jQuery slideshow plugin with built-in parallax effect

    Destaque is a simple jquery plugin with built-tin parallax effect which can be easily applied to multiple slides using Destaque Queue.