In this tutorial, we will learn how to create an infinite scroll effect using only CSS, without the need for JavaScript. Infinite scroll is a popular web design trend that allows content to load continuously as the user scrolls down the page, eliminating the need for pagination or clicking through to the next page.
Before we get started, it’s important to note that this technique may not be suitable for all types of websites or applications. Infinite scroll can consume a lot of resources and data, so it’s important to consider the performance implications before implementing it on your site.
Step 1: Set Up Your HTML Structure
To begin, create a basic HTML file with a list of items that you want to display in your infinite scroll. For this example, we will use a simple list of items inside a container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Scroll CSS Only</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<!-- Add more items as needed -->
</div>
</body>
</html>Step 2: Style Your Items and Container
Next, create a CSS file and style your items and container. Add some basic styling to make the items look presentable and the container to have a specific height that will trigger the infinite scroll effect.
.container {
height: 300px; /* Height of the container */
overflow-y: scroll; /* Enable vertical scrolling */
}
.item {
padding: 20px;
margin: 10px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
}Step 3: Implement Infinite Scroll Effect
To create the infinite scroll effect, we will use CSS animations to load more items as the user scrolls down the page. Here’s how you can achieve this effect:
.item:nth-child(n+6) {
opacity: 0; /* Hide items starting from the 6th item */
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
to {
opacity: 1; /* Fade in effect */
}
}In this code snippet, we are using the nth-child selector to target items starting from the 6th item and setting their opacity to 0 to hide them. Then, we are defining a CSS animation called fadeIn that gradually increases the opacity of the hidden items to 1, creating a fade-in effect.
Step 4: Test Your Infinite Scroll Effect
Save your HTML and CSS files and open the HTML file in a web browser. Scroll down the page to trigger the infinite scroll effect and see the hidden items fade in as you scroll.
Congratulations! You have successfully created an infinite scroll effect using only CSS, without the need for JavaScript. Feel free to customize the styling and animations to suit your website’s design and requirements. Happy coding!
I could be wrong, but an interesting way to think about negative delay is that a negative delay is actually a head-start (i.e. the opposite of delay). So a delay of -10s means the item will have a 10s head-start into its animation. And that is why the item would start in a different position, because it is starting where it would've been after 10s have passed into its animation
Is there a way to stop scrolling on hover?
Thanks senpai
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
<div class="item item7"></div>
<div class="item item8"></div>
</div>
<style>
*{
margin:0;
}
.wrapper {
border:1px solid black;
width:90%;
max-width: 1536px;
margin-inline:auto;
height:100px;
margin-top:5rem;
position:relative;
overflow:hidden;
mask-image: linear-gradient(
to right,
rgba(0,0,0,0),
rgba(0,0,0,1) 20%,
rgba(0,0,0,1) 80%,
rgba(0,0,0,0),
);
}
@keyframes bro-left {
to {
left: -200px;
}
}
.item{
width:200px;
height: 100px;
background-color:red;
border-radius: 6px;
position: absolute;
left: max(calc(200px * 8),100%);
animation-name: bro-left;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.item1 {
animation-delay: calc(30s / 8 * (8 – 1) * -1) ;
}
.item2 {
animation-delay: calc(30s / 8 * (8 – 2) * -1) ;
}
.item3 {
animation-delay: calc(30s / 8 * (8 – 3) * -1) ;
}
.item4 {
animation-delay: calc(30s / 8 * (8 – 4) * -1) ;
}
.item5 {
animation-delay: calc(30s / 8 * (8 – 5) * -1) ;
}
.item6 {
animation-delay: calc(30s / 8 * (8 – 6) * -1) ;
}
.item7 {
animation-delay: calc(30s / 8 * (8 – 7) * -1) ;
}
.item8 {
animation-delay: calc(30s / 8 * (8 – 8) * -1) ;
}
</style>
<script>
</script>
</body>
</html>
I have this slight problem when the list ends theres always a gap before it goes back to the starting list
I remember when the element tag Marquee would work everyone would use that instead in the 90s
I just saw that you have achieved 100% score on your website from lighthouse with next.js, can you please create a video explaining how to exactly get that 100%, im sure the video is going to be viral, if not im welling to pay for such a course with a fair price, please consider that.
Great video! Just wondering if there are any amendments that can be made to evenly space each item in the marquee when they have differing lengths since I need to use text rather than a box and it looks janky.
Hey can u suggest me how much time should we give on front js❓❓❓❓
Thank you so much
ty
make videos on JS as well
animation-delay is not working for me …then what can i do
Mine is not running or having gap between,
I subscribe you because of this video. The explanation is cleaner than a bald man's head
I think i get the general idea? however its still confusing how you'd do this for "dynamic divs", when you don't know how many divs youd have (showing icons based on how many <smtg> u get back from the server for example)
Keep it up bro new subscriber👍
Mind blown. That is absolutely amazing how it all works mathematically to produce the marquee effect. It's very simple to add in custom properties for the marquee timing and number of items. Fantastic.
Cool
my divs are so far of each other in the infinite scroll, how can i fix that? where value should i change?
even simpler
<marquee> tag, its deprecated but still is the same