Let's discuss the parallax effect.
Here is a demo I have:
.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>This demo showcases a simple CSS-only parallax effect.
I am looking to enhance this parallax effect by adding movement to the background images. However, since the position of these images is fixed, I am unsure how to create the illusion of movement or change their positions dynamically. I would like to introduce subtle motion to the background images as users scroll through the page, possibly altering their coordinates using JavaScript or CSS transitions.