After extensive research on the topic, I find the solution to implementing a parallax effect using GSscrolltrigger a bit complex. This is mainly because I need to dynamically adjust the height of the parent div based on @media CSS, while ensuring that the img (maintaining a 16/9 ratio) is placed within a child div nested in a bootstrap fluid container div.
Is there a more efficient and simpler method to achieve this, possibly without the need for dynamic adjustments?
<div class="container-fluid parallax-main d-flex align-items-center justify-content-center">
<div class="parallax-image" style="background: url('pathToImage') no-repeat; background-size:cover;"></div>
<div class="parallax-overlay">...</div>
</div>
.parallax-main {
height: 50vmin;
text-align: center;
position: relative;
overflow: hidden;
}
.parallax-image {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
opacity: 1;
}
.parallax-overlay {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
margin: 0 auto;
max-width: 1140px;
position: relative;
z-index: 2;
}
@media (min-width:768px) {
.parallax-main { height: 55vmin; }
}
@media (min-width:992px) {
.parallax-main { height: 60vmin; }
}
@media (min-width:1100px) {
.parallax-main { height: 70vmin; }
}
@media (min-width:1200px) {
.parallax-main { height: 80vmin; }
}
@media (min-width:1200px) {
.parallax-main { height: 90vmin; }
}
@media (min-width:1400px) {
.parallax-main { height: 100vmin; }
}