Swap Out Background Images On Scroll - jQuery Scroll Swap

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

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" data-position="left">
    ... Any Content Here
  </div>
  <div data-image="bg-2.jpg">
    ... Any Content Here
  </div>
  <div data-image="bg-3.jpg" data-position="right">
    ... 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.75 (75%).

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

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: 'image'
});

7. Specify the distance between the text. Default: "75vh"

$('.scroll-graphic').scrollSwap({
  spreadDistance: '100px'
});

8. Set the width of the text box. Default: "50%"

$('.scroll-graphic').scrollSwap({
  width: '30px'
});

9. Set the background color of the text box. Default: "rgba(255,255,255,0.85)"

$('.scroll-graphic').scrollSwap({
  backgroundColor: 'rgba(0,0,0,0.35)'
});

10. Determine whether to disable the built-in CSS. Default: false.

$('.scroll-graphic').scrollSwap({
  noCSS: true // you need to code your own CSS styles
});

Changelog:

2022-03-25

  • Fix so that first background shows up immediately.

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