I've been working on creating a horizontal slider animation that smoothly scrolls, inspired by the one showcased on
The slider on weltio remains sticky as you scroll, showcasing images and content within.
On my page, I have a lot of content and my goal is to have the div occupy the screen when scrolled to, and as you continue scrolling, the content changes seamlessly.
-------------------------------------------------------------------------------Despite extensive research and searching for examples, I have not been able to achieve the smooth, sticky, animated design that I am aiming for. It seems there aren't any similar examples available online for me to use.
The code snippet below is the latest solution I've tried, but it still lacks that smoothness I'm looking for. The scroll on the page is noticeable, whereas I want it to be fixed in place, giving that same smooth effect demonstrated on weltio.
.contain {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
scroll-behaviour: smooth;
scroll-snap-type: y mandatory;
}
.sec {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: centre;
background: #f00;
scroll-snap-align: center;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
h3 {
color: #ffffff;
font-size: 10vw;
text-align: center;
margin: 0 50px;
}
.sec:nth-child(1) {
background: #f00 url(./big-bgr.png);
}
.sec:nth-child(2) {
background: #0f0 url(./big-bgr.png);
}
.sec:nth-child(3) {
background: #ff0 url(./big-bgr.png);
}
.sec:nth-child(4) {
background: #f436ee url(./big-bgr.png);
}
.sec:nth-child(5) {
background: #00f url(./big-bgr.png);
}
.content {
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.content h2 {
position: relative;
display: flex;
justify-content: center;
}
.content h2 span {
position: sticky;
top: 0;
line-height: 100vh;
height: 100vh;
color: #ffffff;
font-size: 14vw;
margin-top: calc(100vh * var(--i));
}<div class="banner">
<div class="contain">
<div class="sec">
<h3>Scroll Down</h3>
</div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="sec"></div>
<div class="content">
<h2>
<span style="--i:1;">T</span>
<span style="--i:2;">E</span>
<span style="--i:3;">S</span>
<span style="--i:4;">T</span>
</h2>
</div>
</div>
</div>