Get new jQuery plugins just once a week

×

Parallax-Scroll

February 5, 2015

jQuery plugin for background-attachment: scroll

Parallax Scroll is a jQuery plugin for background-attachment: scroll with friction, similar to the parallax scrolling effect on Spotify.

Created by Aen

Download

Example

Parallax Scroll jQuery plugin

background

パララックス Parallax-Scroll

See Demo.

Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll.

It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs buttery smooth and retains the rubber-band scroll behavior in Safari. Works great on mobile too.

Markup

The basic markup consists of content sections placed between background holders. The width and height of the original images must be supplied via data attributes. They are required for the calculation of aspect ratios.

<div id="pic1" class="bg-holder" data-width="1024" data-height="768"></div>

<section>
  Content that "slides" over the backgrounds
</section>

<div id="pic2" class="bg-holder" data-width="1024" data-height="768">
  Optional content to be displayed on top of the backgrounds
</div>

Add background images to the .bg-holder elements with the following styles.

/* All parent elements of .bg-holder must be 100% height for vertical stretch to work */
html,
body {
  width: 100%;
  height: 100%;
}

.bg-holder {
  width: 100%;
  height: 100%;
}

.bg-holder#pic1 {
  background-image: url('pic1.jpg');
}

.bg-holder#pic2 {
  background-image: url('pic2.jpg');
}

The nicest thing about using CSS background images is that by adding media queries we can do responsive image sizes.

@media (min-width: 768px) {
  .bg-holder#pic1 {
    background-image: url('pic1_bigger.jpg');
  }
  .bg-holder#pic2 {
    background-image: url('pic2_bigger.jpg');
  }
}

Initialization & Options

To initialize the plugin, call the parallaxScroll method on your background elements.

$('.bg-holder').parallaxScroll({
  friction: 0.5
});

The plugin accepts one option – friction. It should be a float value that is more than 0 and less than 1. 0 causes the background to behave as it has background-attachment: scroll. 1 (maximum friction) is the same as background-attachment: fixed. A value greater than 1 will cause the background to scroll in reverse!

Other features available in Pederan’s plugin such as holderMinHeight and coverRatio can be achieved purely with CSS and should be. The fallback option to turn off parallax in mobile devices is unnecessary because this plugin works smoothly on mobile devices.

Installation

Install using bower

``` bower install parallax-scroll ````

Notes

Most likely requires a jQuery of lower version than other plugins you use. If in doubt I recommend 1.8.0 or higher.

The only limitation is that the background-size property is not supported by IE<9 so this plugin would not work on that ancient browser.

This plugin is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll. Beautiful tilt-shift photos in the demo by rolohauck.

===

Made by Aen. Code licensed under MIT.

Parallax-Scroll

Related posts:

Waypoints
Scrolltab
ScrollMe

To install using Bower
bower install parallax-scroll

Parallax Scroll jQuery plugin

http://jquer.in/wp-content/uploads/2015/02/Parallax-Scroll.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever