Swap The Background Image As You Scroll Plugin

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.

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 data-image="bg-2.jpg">
    ... Any Content Here
  <div data-image="bg-3.jpg">
    ... Any Content Here

3. Call the perform scrollSwap on the parent container and accomplished.


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

  triggerFromTop: 0.75, // 75%

5. Specify the animation pace.

  speed: 0.7

6. Override the default HTML information attribute:

  dataImageAttribute: 'data-image'


You can include these options during instantiation.

  • dataImageAttribute – Change the default attribute used to find the image. i.e. data-image="picture1.jpg"
  • triggerFromTop – The percentage from the top of the viewport when the background should trigger. A 1 means as it comes into view. 0.5 is in the middle of the screen.
  • speed – Speed of cross dissolve.
  • noCSS – Use your own CSS and disregard all of the built-in default CSS.
  • spreadDistance – How many pixels/vh are between the text elements.
  • backgroundColor – The background color of the text boxes
  • width – The width of each text box.

Swap Out Background Images On Scroll, jQuery Scroll Background Swap Plugin/Github, change image on scroll, 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 Usage, please go to the official website.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

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