Submit your widget

jQuery parallax scrolling effect------Parallax-Scroll

Created 4 years ago   Views 31299   downloads 4782    Author aentan
jQuery parallax scrolling effect------Parallax-Scroll
View DemoDownload 719.9 KB
41
Share |

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

Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if theirbackground-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>

Read more:https://github.com/aentan/Parallax-Scroll