Introduction
Today we are going to make an Vertical Scroll Bar With Animation by using HTML and CSS. In this scroll bar, there will be some text written in the divs. That text will move continuously from right to left and left to right infinitely until the user active on the website. This is very useful, as you can use it to show your famous product name. Your name, and any other details you want.
Now let’s start making this component together with the help of simple HTML and CSS code. That will not be very complicated as everyone can understand it, no matter if you are fresher guy.
HTML part of infinite vertical scroll animation css
First, we will create the structure of this scroll page with the help of HTML. In which we will first write the heading of the project in the heading, then make a parent div, and in this we will make some divs to store names in the child div in one row, and there will be 4 to 5 divs like that. In divs, we will make child divs in which names will be written for scrolling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="app">
<header>
<h1>Infinite Scroll Animation</h1>
</header>
<div class="tag-list">
<div class="loop-slider" style="--duration:15951ms; --direction:normal;">
<div class="inner">
<div class="tag"><span>#</span> JavaScript</div>
<div class="tag"><span>#</span> webdev</div>
<div class="tag"><span>#</span> Typescript</div>
<div class="tag"><span>#</span> Next.js</div>
<div class="tag"><span>#</span> UI/UX</div>
<!-- duplicated content -->
<div class="tag"><span>#</span> JavaScript</div>
<div class="tag"><span>#</span> webdev</div>
<div class="tag"><span>#</span> Typescript</div>
<div class="tag"><span>#</span> Next.js</div>
<div class="tag"><span>#</span> UI/UX</div>
</div>
</div>
<div class="loop-slider" style="--duration:19260ms; --direction:reverse;">
<div class="inner">
<div class="tag"><span>#</span> webdev</div>
<div class="tag"><span>#</span> Gatsby</div>
<div class="tag"><span>#</span> JavaScript</div>
<div class="tag"><span>#</span> Tailwind</div>
<div class="tag"><span>#</span> Typescript</div>
<!-- duplicated content -->
<div class="tag"><span>#</span> webdev</div>
<div class="tag"><span>#</span> Gatsby</div>
<div class="tag"><span>#</span> JavaScript</div>
<div class="tag"><span>#</span> Tailwind</div>
<div class="tag"><span>#</span> Typescript</div>
</div>
</div>
<div class="loop-slider" style="--duration:10449ms; --direction:normal;">
<div class="inner">
<div class="tag"><span>#</span> animation</div>
<div class="tag"><span>#</span> Tailwind</div>
<div class="tag"><span>#</span> React</div>
<div class="tag"><span>#</span> SVG</div>
<div class="tag"><span>#</span> HTML</div>
<!-- duplicated content -->
<div class="tag"><span>#</span> animation</div>
<div class="tag"><span>#</span> Tailwind</div>
<div class="tag"><span>#</span> React</div>
<div class="tag"><span>#</span> SVG</div>
<div class="tag"><span>#</span> HTML</div>
</div>
</div>
<div class="loop-slider" style="--duration:16638ms; --direction:reverse;">
<div class="inner">
<div class="tag"><span>#</span> Gatsby</div>
<div class="tag"><span>#</span> HTML</div>
<div class="tag"><span>#</span> CSS</div>
<div class="tag"><span>#</span> React</div>
<div class="tag"><span>#</span> Next.js</div>
<!-- duplicated content -->
<div class="tag"><span>#</span> Gatsby</div>
<div class="tag"><span>#</span> HTML</div>
<div class="tag"><span>#</span> CSS</div>
<div class="tag"><span>#</span> React</div>
<div class="tag"><span>#</span> Next.js</div>
</div>
</div>
<div class="loop-slider" style="--duration:15936ms; --direction:normal;">
<div class="inner">
<div class="tag"><span>#</span> Next.js</div>
<div class="tag"><span>#</span> React</div>
<div class="tag"><span>#</span> webdev</div>
<div class="tag"><span>#</span> Typescript</div>
<div class="tag"><span>#</span> Gatsby</div>
<!-- duplicated content -->
<div class="tag"><span>#</span> Next.js</div>
<div class="tag"><span>#</span> React</div>
<div class="tag"><span>#</span> webdev</div>
<div class="tag"><span>#</span> Typescript</div>
<div class="tag"><span>#</span> Gatsby</div>
</div>
</div>
<div class="fade"></div>
</div>
</div>
</body>
</html>CSS part of infinite vertical scroll animation css
After making the structure of the infinite vertical scroll animation css. We will give it some styling to make it better and will set infinite scroll animation css with the help of CSS( an external stylesheet to the HTML file). In this first step, we will make the background black, then center the parent div, and then forward toward the content of the div.
In child divs, we will give some styling to design them, like giving color, font size to the text. Background color, and border properties to the background of the text.
body {
font-family: 'Montserrat', sans-serif;
background: #1e293b;
color: #f8fafc;
}
.app {
min-width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
header {
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem;
text-align: center;
h1 {
font-weight: 600;
font-size: 2rem;
margin-bottom: 0.5rem;
@media (min-width: 768px) {
font-size: 3rem;
}
}
p {
color: #94a3b8;
margin-bottom: 0.5rem;
}
a {
color: #7393c1;
}
}
.tag-list {
width: 30rem;
max-width: 90vw;
display: flex;
flex-shrink: 0;
flex-direction: column;
gap: 1rem 0;
position: relative;
padding: 1.5rem 0;
overflow: hidden;
}
.loop-slider {
.inner {
display: flex;
width: fit-content;
animation-name: loop;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: var(--direction);
animation-duration: var(--duration);
}
}
.tag {
display: flex;
align-items: center;
gap: 0 0.2rem;
color: #e2e8f0;
font-size: 0.9rem;
background-color: #334155;
border-radius: 0.4rem;
padding: 0.7rem 1rem;
margin-right: 1rem; // Must used margin-right instead of gap for the loop to be smooth
box-shadow:
0 0.1rem 0.2rem rgb(0 0 0 / 20%),
0 0.1rem 0.5rem rgb(0 0 0 / 30%),
0 0.2rem 1.5rem rgb(0 0 0 / 40%);
span {
font-size: 1.2rem;
color: #64748b;
}
}
.fade {
pointer-events: none;
background: linear-gradient(90deg, #1e293b, transparent 30%, transparent 70%, #1e293b);
position: absolute;
inset: 0;
}
@keyframes loop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}Animation part of infinite vertical scroll animation css
After making the infinite scroll animation CSS with design, we will now make it infinite vertical scroll animation css. Through @keyframe( a framework of CSS used to add animation to the HTML webpage). In which we will apply the animation to the child div and parent div by using the transform property and many other properties, and we will give the animation a name in the simple CSS class or id of that div.
Output of Vertical Scroll Bar With Animation
Finally, we made the Vertical Scroll Bar With Animation with the help of HTML and CSS by following the simple code step by step. You can use it on your webpage, or you can make such a project to increase your experience. If you want the source code, then click on the button given below to download it.
For more explanation, click on the link given below to watch the video.
You can also check Detail Hovering Card
