How to add or create an illusion of movement to a fixed div?

Tags: jquery,html,css

Problem :

I have this demo:

.container {
max-width: 960px;
margin: 0 auto;
}
div.module:last-child {
margin-bottom: 0;
background-color:#f2f0f2;
}
div.module.content {
height: 15vw;
max-height: 300px;
}
div.module.parallax {
height: 30vw;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div.module.parallax-1 {
background-image: url("http://safe-castle-3835.herokuapp.com/img/convoy_1920.jpg");
}
div.module.parallax-2 {
}
div.module.parallax-3 {
background-image: url("http://safe-castle-3835.herokuapp.com/img/join.jpg");
}
div.module.parallax-4 {
background-image: url("http://safe-castle-3835.herokuapp.com/img/join.jpg");
height: 5vw;
}
<div class="module parallax parallax-1"></div>

<div class="module content">
<div class="container">

</div>
</div>

<div class="module parallax parallax-2">
<div class="container">

</div>
</div>

<div class="module content">
<div class="container">

</div>
</div>

<div class="module parallax parallax-3">
<div class="container">

</div>
</div>

<div class="module content">
<div class="container">

</div>
</div>

<div class="module parallax parallax-4">
<div class="container">

</div>
</div>

And as you can see, it's basically is parallax, a pretty simple one, CSS only.

But I want background images not only to be fixed, but I want to add some movement to them as well, but they have fixed position, and I don't know a good way to make them move, so to say, how to add an illusion of movement to them, or how to force them to change position, even tho their position is fixed.

Ideally it would be nice to add a little beet of movement to them as well when user is scrolling the page, maybe with javascript somehow change their coordinates with a small step, but I don't know a good way to do so, but preferably with CSS.

Solution :

Make sure you're using JQuery.

//Parallax Scroll Script

$(document).ready(function(){ var$window = $(window); var$bgobj = $('div.module.parallax-1'); // assigning the object var$bgobj2 = $('div.module.parallax-2');$(window).scroll(function() {
var yPos = -($window.scrollTop() / 5); // Put together our final background position var coords = '0% '+ yPos + 'px'; // Move the background$bgobj.css({ backgroundPosition: coords });
\$bgobj2.css({ backgroundPosition: coords });
});

});

//End Parallax Scroll Script