Swap Out Background Images On Scroll - jQuery Scroll Swap

Swap Out Background Images On Scroll - jQuery Scroll Swap
File Size: 5.16 KB
Views Total: 138
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Scroll Swap is a jQuery plugin that automatically swaps out the background images of page sections as you scroll down.

The plugin also has the ability to make the background images absolutely positioned so that you will see a subtle parallax scrolling effect when scrolling through page sections.

How to use it:

1. Download and place the jquery-scroll-swap.js script after the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery-scroll-swap.js"></script>

2. Specify background images for each page section using the data-image attribute:

<div class="scroll-graphic">
  <div data-image="bg-1.jpg">
    ... Any Content Here
  </div>
  <div data-image="bg-2.jpg">
    ... Any Content Here
  </div>
  <div data-image="bg-3.jpg">
    ... Any Content Here
  </div>
  ...
</div>

3. Call the function scrollSwap on the parent container and done.

$(function(){
  $('.scroll-graphic').scrollSwap();
});

4. Determine how far from the top of the page to activate the image swapping. Default: 0.5 (50%).

$('.scroll-graphic').scrollSwap({
  triggerFromTop: 0.75, // 75%
});

5. Specify the animation speed. Default: 0.5.

$('.scroll-graphic').scrollSwap({
  speed: 0.7
});

6. Override the default HTML data attribute:

$('.scroll-graphic').scrollSwap({
  dataImageAttribute: 'data-image'
});

This awesome jQuery plugin is developed by jrue. For more Advanced Usages, please check the demo page or visit the official website.