article:
Plugin: Refine Slide
article:
Plugin: jParallax

Plugin: Scrolling Parallax

Advertisement

Scrolling Parallax is a 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.

Plugin: Scrolling Parallax

Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.

The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the background to name a few. Addtionally you can attach the parallax to any piece of markup, as well as pass an image path as described above.


Sample:

Simply include the javascript files for jQuery and the plugin, then call the scrolling parallax with the path to your image:

$.scrollingParallax('img/background-parallax.jpg');

his will append the image to the page, and stretch its dimensions as described above. If you want to control some of the options, these can be passed as an object in the second argument:

$.scrollingParallax('img/background-parallax.jpg', {
    bgWidth : '200%',
    enableHorizontal : true
});

source
download
wikipedia: Parallax effect
demo: Simple scrolling parallax effect
demo: Multiple, layered parallaxes for a nice depth effect
demo: Parallax in all directions: vertical and horizontal scrolling
demo: Parallax called on a piece of inline HTML markup

Advertisement
Tags: plugin, jquery, scroll, parallax, js, html, css, design

Leave a Comment

No Comment

© Creative3x Ltd.