How do I add or create the illusion of movement to a fixed div?
I'm talking about the parallax effect.
I have this demo:
.container {
max-width: 960px;
margin: 0 auto;
}
div.module:last-child {
margin-bottom: 0;
background-color:#f2f0f2;
}
div.module.content {
padding: 40px 10px;
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 {
background-image: url("http://safe-castle-3835.herokuapp.com/img/header.jpg");
}
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 mostly parallax, pretty simple, just CSS.
But I want the background images not only to be fixed, but I also wanted to add some movement to them, but they have a fixed position and I don't know how to do that, so to speak, how to add the illusion of movement to them or how to force change their position even if their position is fixed.
Ideally, it would be nice to add a little beet of motion to them as the user scrolls down the page, perhaps with javascript somehow changing their coordinates in small increments, but I don't know how to do this, but preferably with CSS.
+3
source to share
1 answer
Make sure you are 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
+3
source to share