Infinite scrolling animations are a great way to add dynamic effects to your website. In this tutorial, we will create a smooth horizontal scrolling animation using CSS and JavaScript. This effect is useful for image sliders, testimonials, or product carousels.
By the end of this tutorial, you’ll be able to implement an infinite scrolling animation that pauses on hover and smoothly transitions items across the screen.
Before we dive into the code, here is a preview of what we will build:
The HTML structure is simple and consists of:
A heading (<h1>) for the title.
A container (<div class="scrollContainer">) to hold the scrolling items.
A wrapper (<div class="scrollWrapper">) that contains the individual items (<div class="item">).
<h1>Infinite Scroller Using Js And Css</h1>
<div class="scrollContainer">
<div class="scrollWrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>The CSS styles define the layout and animation for the infinite scroll effect.
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}This resets default padding, margin, and box-sizing for all elements.
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #dadada;
}
body>h1 {
text-align: center;
margin: 1rem auto;
text-transform: capitalize;
}Sets a light gray background for the page.
.scrollContainer {
max-width: 1200px;
margin: 0 auto;
/* border: 1px solid red; */
overflow-x: hidden;
-webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
/* stop animation on hover */
.scrollContainer:hover .scrollWrapper {
animation-play-state: paused;
}The container has a maximum width of 1200px and centers itself on the page.
overflow-x: hidden ensures the horizontal scrollbar is hidden.
The -webkit-mask creates a fading effect on the sides of the container.
animation-play-state: paused it stoped the scroll animation of hover
.scrollContainer .scrollWrapper {
display: flex;
gap: 1rem;
animation: scrollAnim 15s infinite linear;
width: max-content;
}The wrapper usesflexto align items horizontally.
width: max-contentensures the wrapper expands to fit its children.
Theanimationproperty applies thescrollAnim keyframe animation.
.scrollContainer .scrollWrapper .item {
width: 200px;
height: 200px;
background-color: aquamarine;
font-size: clamp(2rem, 4vw, 4rem);
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
transition: 200ms ease-in-out;
}
.scrollContainer .scrollWrapper .item:hover{
background-color: rgb(110, 236, 194);
cursor: pointer;
}
/* way 1 :- to fix this glitch */
/* .scrollContainer .scrollWrapper .item:nth-child(1){
margin-left: 1rem;
} */Each item is a square box with a fixed size and centered text.
Thehover effect changes the background color.
add this margin-left: 1rem; to this .scrollContainer .scrollWrapper .item:nth-child(1) to fix glitch.
/* animation */
@keyframes scrollAnim {
/* to {
transform: translateX(-50%);
} */
/* second way to fix glitch */
to {
transform: translateX(calc(-50% - 0.5rem));
}
}ThescrollAnim animation moves the wrapper to the left by 50% of its width, creating the infinite scroll effect.
transform: translateX(calc(-50% - 0.5rem));to fix the glitch (total translate {50%}) -(half of flex gap {1rem/2})
The JavaScript dynamically clones the items to create a seamless infinite scroll effect.
const scrollWrapper = document.querySelector('.scrollWrapper');
const items = [...scrollWrapper.children];
items.forEach((item) => {
const clonedItem = item.cloneNode(true);
// clonedItem.classList.add("red");
scrollWrapper.appendChild(clonedItem);
})The script selects the.scrollWrapperand its children.
It clones each item and appends the clone to the wrapper, effectively doubling the number of items.
This ensures the animation appears continuous.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Do Code : Infinite Scroller Using Js And Css</title>
</head>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #dadada;
}
body>h1 {
text-align: center;
margin: 1rem auto;
text-transform: capitalize;
}
.scrollContainer {
max-width: 1200px;
margin: 0 auto;
/* border: 1px solid red; */
overflow-x: hidden;
-webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
/* stop animation on hover */
.scrollContainer:hover .scrollWrapper {
animation-play-state: paused;
}
.scrollContainer .scrollWrapper {
display: flex;
gap: 1rem;
animation: scrollAnim 15s infinite linear;
width: max-content;
}
.scrollContainer .scrollWrapper .item {
width: 200px;
height: 200px;
background-color: aquamarine;
font-size: clamp(2rem, 4vw, 4rem);
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
transition: 200ms ease-in-out;
}
.scrollContainer .scrollWrapper .item:hover{
background-color: rgb(110, 236, 194);
cursor: pointer;
}
/* way 1 :- to fix this glitch */
/* .scrollContainer .scrollWrapper .item:nth-child(1){
margin-left: 1rem;
} */
/* animation */
@keyframes scrollAnim {
/* to {
transform: translateX(-50%);
} */
/* second way to fix glitch */
to {
transform: translateX(calc(-50% - 0.5rem));
}
}
/* check flag */
/* .red {
background-color: red !important;
} */
</style>
<body>
<h1>Infinite Scroller Using Js And Css</h1>
<div class="scrollContainer">
<div class="scrollWrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
<script>
const scrollWrapper = document.querySelector('.scrollWrapper');
const items = [...scrollWrapper.children];
items.forEach((item) => {
const clonedItem = item.cloneNode(true);
// clonedItem.classList.add("red");
scrollWrapper.appendChild(clonedItem);
})
</script>
</body>
</html>In this tutorial, we’ve successfully created a smooth horizontal infinite scrolling animation using CSS and JavaScript. This effect is highly versatile and can be used in various applications like image sliders, product carousels, and testimonials, enhancing the user experience by creating a visually dynamic and engaging layout.
Through a combination of well-structured HTML, clean CSS styling, and simple JavaScript functionality, we've achieved a seamless scrolling effect that continuously moves items across the screen. Moreover, we added an interactive feature that pauses the animation when the user hovers over the scrollable area, improving usability.
The key takeaways are:
flexbox, animation, and masking techniques to make the scrollable area and items look appealing while maintaining performance.By applying these techniques, you can easily implement this feature into your own projects, adding a modern and interactive touch to your web design. Experiment with the timings, content, and styles to make the effect uniquely yours!
