Have you ever seen a website where content flows seamlessly without interruptions? That’s the magic of Infinite Scroll with CSS Only! In this guide, we’ll show you how to implement this captivating effect effortlessly.
Why Choose Infinite Scroll?
Infinite scroll captivates users by letting them explore content without interruption. Ideal for displaying images, articles, or products, it’s an essential feature for modern web design.
Why Create an Amazing Infinite Scroll with CSS Only?
Implementing Infinite Scroll with CSS Only can significantly enhance your website’s performance. By relying solely on CSS, you reduce the need for JavaScript, which can improve load times and minimize HTTP requests. This not only makes your site faster but also leads to a smoother user experience. Additionally, CSS animations are generally more efficient than JavaScript, allowing for better resource management and a cleaner, more maintainable codebase. Below is a guide on how to create an amazing infinite scroll with CSS only.
Getting Started
1. Setting Up the HTML
To create our infinite scroll effect, we first need a solid HTML structure. Below is the code for a simple setup that includes a wrapper for multiple items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Scroll with CSS Only</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="item item1">
<a href="#"><img src="img/apple.png" alt="Apple"></a>
</div>
<div class="item item2">
<a href="#"><img src="img/art-gallery.png" alt="Art Gallery"></a>
</div>
<div class="item item3">
<a href="#"><img src="img/brand-guideline.png" alt="Brand Guideline"></a>
</div>
<div class="item item4">
<a href="#"><img src="img/css-3.png" alt="CSS 3"></a>
</div>
<div class="item item5">
<a href="#"><img src="img/iphone-5.png" alt="iPhone 5"></a>
</div>
<div class="item item6">
<a href="#"><img src="img/logo123.png" alt="Logo"></a>
</div>
<div class="item item7">
<a href="#"><img src="img/vr-glasses.png" alt="VR Glasses"></a>
</div>
<div class="item item8">
<a href="#"><img src="img/wall-art.png" alt="Wall Art"></a>
</div>
</div>
</body>
</html>
2. Crafting the CSS
Now let’s dive into the CSS that brings our Infinite Scroll with CSS Only to life. Here’s the complete CSS code you’ll need:
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.wrapper {
--duration: 10s;
--total_items: 8;
--item_width: 120px;
width: 95%;
height: 100px;
margin-inline: auto;
position: relative;
overflow: hidden;
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0)
);
-webkit-mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0)
);
}
@keyframes scrollLeft {
to {
left: calc(var(--item_width) * -1);
}
}
.item {
width: var(--item_width);
height: auto;
position: absolute;
left: max(calc(var(--item_width) * var(--total_items)), 100%);
animation-name: scrollLeft;
animation-duration: var(--duration);
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.wrapper:hover .item{
animation-play-state: paused;
}
.item,
.item a {
display: flex;
align-items: center;
justify-content: center;
}
.item1 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 1)
);
}
.item2 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 2)
);
}
.item3 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 3)
);
}
.item4 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 4)
);
}
.item5 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 5)
);
}
.item6 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 6)
);
}
.item7 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 7)
);
}
.item8 {
animation-delay: calc(
var(--duration) / var(--total_items) * -1 * (var(--total_items) - 8)
);
}
Understanding the CSS
- Wrapper Setup: The
.wrapperis crucial for the infinite scroll effect, holding the items and applying a gradient mask for a sleek look:
.wrapper {
--duration: 10s;
--total_items: 8;
--item_width: 120px;
width: 95%;
height: 100px;
margin-inline: auto;
position: relative;
overflow: hidden;
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0)
);
}2. Animation Magic: The @keyframes rule creates the scroll effect:
@keyframes scrollLeft {
to {
left: calc(var(--item_width) * -1);
}
}3. Item Configuration: Each item is animated to scroll, with different delays for a staggered effect:
.item {
width: var(--item_width);
height: auto;
position: absolute;
left: max(calc(var(--item_width) * var(--total_items)), 100%);
animation-name: scrollLeft;
animation-duration: var(--duration);
animation-timing-function: linear;
animation-iteration-count: infinite;
}.wrapper:hover .item{
animation-play-state: paused;
}Conclusion
And there you have it! With just a few lines of CSS, you can create an impressive Infinite Scroll with CSS Only that will keep your users engaged and browsing. Feel free to customize the images and animation duration to fit your site’s aesthetic. Happy coding, and watch your projects come to life!
Image sources:
Art and design icons created by shmai – Flaticon
Brand guideline icons created by Karyative – Flaticon
Wall art icons created by vectorsmarket15 – Flaticon
Css icons created by Pixel perfect – Flaticon
Logo design icons created by Freepik – Flaticon
Iphone icons created by Freepik – Flaticon
Logos icons created by pictogramer – Flaticon
Cardboard icons created by Freepik – Flaticon