Sometimes, a web designer wants to create creative and mind-blowing stuff. Whether he is creating a part of the website template or a plugin he must use a parallax background effect or scrolling effect to add some creativity. Similarly, CSS animations are another source of creative assets in web designing. So, in this tutorial, we are going to build a moving background image using CSS and a little bit of jQuery.
You can implement this moving background image into your own project for various purposes. Yup! it’s just a conceptional project that can be further used in many other creative web designing projects. Before going further, I would like to explain a little bit about this “moving background image” project.
Actually, the background-attachment can be move using the pure CSS (background-attachment: scroll;), but it will move along with the foreground contents. As you have seen on the demo page, our second background (boat) image moves vertically on the scroll event. Similarly, it can be moved to any direction (top, left, right, or bottom) according to your needs. Do you know, how is it possible? well! it’s due to the jQuery window scroll function.
So, what the logic behind it? actually, we are moving a div element that contains a background image in its CSS properties. Not the background-attachment itself. Now, you may have got the actual point to move a background-image over an image. OK! let’s begin with coding to finish this interesting scrolling effect.
HTML for Moving Background Image
The HTML is very simple, we just need two div elements. One of them is the main container that contains a static background. The other div also contains a background image that we’ll move using jQuery. So, create a markup structure as follows:
<div class="section bg-static"> <div class="bg-move"></div> </div>
You can place any other HTML contents inside the outer div (that has the class name “section” and “bg-static”) tag.
The CSS Styles
Now we’ll define some basic CSS styles for the static section and set a background image. We kept the background-size cover and centered it. You can also use other available values for these properties as you need.
.section.bg-static {
background-color: #85c1e9;
background-image: url("../img/scrolling-bg.png");
background-size: cover;
background-position: center;
}
Similarly, we’ll define styles for the second div element. Here, we’ll keep the absolute position for this div “.bg-move” to animate it in jQuery. The other background attributes are quite similar to the above div.
.section .bg-move {
position: absolute;
top: 0;
bottom: 0;
right: auto;
width: 100%;
background-image: url("../img/boat.png");
background-size: cover;
background-position: center;
}
Move Background Image on Scroll
Finally, it’s time to animate the div using jQuery to move the background image. Before this, make sure you have loaded the jQuery (JavaScript library) into your HTML document. If you have not included it, add the following jQuery CDN link between the <head> tag of your HTML page.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
In the jQuery window scroll function, we’ll get the scrolling position of the static section and apply it to the second (“.bg-move”) div. You just need to add the following JS code between the <script> tag and place it before the </body> tag. If you want to move the background image to another direction, just replace the left with (right/top/bottom) on the lin .css({ left: leftPosition.
$(window).on("load resize scroll", function() {
$(".bg-static").each(function() {
var windowTop = $(window).scrollTop();
var elementTop = $(this).offset().top;
var leftPosition = windowTop - elementTop;
$(this)
.find(".bg-move")
.css({ left: leftPosition });
});
});
That’s all! I hope you like this image moving tutorial, if you have any questions let me know by comment below.
This tutorial is awesome, but how to avoid horizontal scroll bar which is appearing when animation starts, due to object moves from left to right.
Hello Manish Kumar, You can simply apply
overflow: hidden;to the section. Find section class in demo.css and replace it with the following code.section { float: left; width: 100%; padding-bottom: 3em; /*Add this*/ overflow: hidden; }Hi good work, Ashfaq,
But how do you make it move vertically from top to bottom please.
Many thanks,
Yaswini
Hi Yaswini!
It’s too easy, just change the CSS left property to “top” in the jQuery function then it will move vertically.
$(this) .find(".bg-move") .css({ top: leftPosition }); });