IMPORTANT LINKS
Want to get this as ready made template with just 1 CLICK INSTALL?
First Main container Class
MoveDowns
First Secondary container Class
MoveDowns-content
2nd Main container Class
Vmove
2nd Secondary container Class
Vmove-content
3rd Main container Class
MoveDown
3rd Secondary container Class
MoveDown-content
JavaScript code for scrolling carousel
<style>
/* ========== MoveDowns ========== */
.MoveDowns {
overflow: hidden;
height: 400px; /* Control the visible height */
position: relative;
}
.MoveDowns-content {
display: flex;
flex-direction: column;
gap: 20px;
position: absolute;
top: 0;
width: 100%;
animation-timing-function: linear;
}
/* ========== Vmove ========== */
.Vmove {
overflow: hidden;
height: 400px;
position: relative;
}
.Vmove-content {
display: flex;
flex-direction: column;
gap: 20px;
position: absolute;
top: 0;
width: 100%;
animation-timing-function: linear;
}
/* ========== MoveDown ========== */
.MoveDown {
overflow: hidden;
height: 400px;
position: relative;
}
.MoveDown-content {
display: flex;
flex-direction: column;
gap: 20px;
position: absolute;
top: 0;
width: 100%;
animation-timing-function: linear;
}
</style>
<script>
// ========== MoveDowns ==========
function MoveDowns(selector, speed) {
const parent = document.querySelector(selector);
const content = parent.querySelector('.MoveDowns-content');
const clone = content.cloneNode(true);
parent.appendChild(clone);
let position = 0;
function animate() {
position += speed;
if (position >= content.clientHeight) position = 0;
content.style.transform = `translateY(${position}px)`;
clone.style.transform = `translateY(${position - content.clientHeight}px)`;
requestAnimationFrame(animate);
}
animate();
}
// ========== Vmove ==========
function Vmove(selector, speed) {
const parent = document.querySelector(selector);
const content = parent.querySelector('.Vmove-content');
const clone = content.cloneNode(true);
parent.appendChild(clone);
let position = 0;
function animate() {
position -= speed;
if (position <= -content.clientHeight) position = 0;
content.style.transform = `translateY(${position}px)`;
clone.style.transform = `translateY(${position + content.clientHeight}px)`;
requestAnimationFrame(animate);
}
animate();
}
// ========== MoveDown ==========
function MoveDown(selector, speed) {
const parent = document.querySelector(selector);
const content = parent.querySelector('.MoveDown-content');
const clone = content.cloneNode(true);
parent.appendChild(clone);
let position = 0;
function animate() {
position += speed;
if (position >= content.clientHeight) position = 0;
content.style.transform = `translateY(${position}px)`;
clone.style.transform = `translateY(${position - content.clientHeight}px)`;
requestAnimationFrame(animate);
}
animate();
}
// Run all effects on page load
window.addEventListener('load', () => {
MoveDowns('.MoveDowns', 1);
Vmove('.Vmove', 1);
MoveDown('.MoveDown', 1);
});
</script>
Top and buttom container overly CSS
CSS class for main container
scroll-section
.scroll-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
#ffffff 0%,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0) 80%,
#ffffff 100%
);
pointer-events: none;
z-index: 2;
}
Download readymade Templates
Download professionally designed readymade templates to save time and streamline your creative projects.
