I am trying to achieve a similar effect as shown on: this website
I require assistance in creating a mouseover image link that hides the top image and reveals a bottom image that scrolls vertically within the same space as the top image.
The long vertical image (400x755px or other dimensions) should scroll gradually over time in the same size as the top image (400x328px).
Here is the codepen link showing what I have attempted so far: view progress so far
function initProps(el) {
const scrollMultiple = 5;
var imageHeight = el.height;
el.style.bottom = `-${imageHeight - 328}px`;
el.style.setProperty("--top", `-${imageHeight - 328}px`);
el.style.setProperty(
"--animation-duration",
`${scrollMultiple * imageHeight}ms`
);
}.container {
padding: 10px 0;
}
.scrolling-window {
border-radius: 10px;
display: block;
width: 400px;
height: 328px;
overflow: hidden;
position: relative;
border: 2px solid #b3b3b3;
margin: 0 auto;
}
.scrolling-window img {
width: 100%;
height: auto;
position: absolute;
z-index: 0;
top: 0;
margin: 0;
padding: 0;
animation: fadeIn 1s;
/* filter: grayscale(100%); */
transition-duration: 0.5s;
}
.scrolling-window:hover img {
animation: scroll var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 0) infinite alternate;
animation-delay: 0.2s;
filter: grayscale(0);
cursor: pointer;
}
@keyframes scroll {
/* to stop for a moment while reversing the animation */
90% {
bottom: 0px;
top: var(--top);
}
100% {
bottom: 0px;
top: var(--top);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
top: -16px;
}
100% {
opacity: 1;
top: 0;
}
}<div class="container">
<div class="row">
<div class="col mt-3">
<!--<div class="main-image">
<img src="https://place-hold.it/600x492/" alt="main-image" class="main-image">
</div>-->
<div class="scrolling-window">
<img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
</div>
</div>
<div class="col mt-3">
<div class="scrolling-window">
<img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
</div>
</div>
<div class="col mt-3">
<div class="scrolling-window">
<img onload="initProps(this)" class="scrolling-image" src="https://place-hold.it/600x1132/" />
</div>
</div>
</div>
</div>