Press "Enter" to skip to content

Swap The Background Image As You Scroll

jQuery Scroll Background Swap is to toggle the background image of an element while scrolling down. Scroll Swap is a jQuery plugin that automatically switches background images for page sections as you scroll down.

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

fixed background image scrolling content, how to scroll multiple images in html, auto change background image css, change image on scroll jquery, change background image on scroll jquery

How to make use of it:

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

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

2. Specify background photographs for every web page part utilizing 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 perform scrollSwap on the parent container and accomplished.

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

4. Determine how removed from the top of the web page to activate the picture swapping.

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

5. Specify the animation pace.

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

6. Override the default HTML information attribute:

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

Swap Out Background Images On Scroll, jQuery Scroll Background Swap Plugin/Github, change image on scroll, css background image change every 5 seconds, css background image scroll animation


See Demo And Download

Official Website(jrue): Click Here

This superior jQuery/javascript plugin is developed by jrue. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *