|
Auto scrolling can add a dynamic touch to your web pages which makes them more engaging and interactive. Whether you need a horizontal or vertical scroll, CSS provides a way to achieve this effect smoothly. In this article, we will discuss how to make an auto scrolling effect with CSS.
Approach- Create the basic HTML structure with different containers for horizontal and vertical scrolling of text.
- Create two containers, one is for horizontal scrolling and the other is for vertical scrolling.
- Create CSS keyframes to define the start and end points of the scrolling animations for both horizontal and vertical text.
- Add effect to pause scrolling animations when user hovers the text to enhance user interaction.
- Style the scrolling container for better visual appearance, ensuring smooth scrolling and appropriate text alignment.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Auto Scrolling with CSS</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Horizontal Auto-Scrolling Text</h1>
<div class="marquee">
<p>This is an auto-scrolling text created with CSS.</p>
</div>
<h1>Vertical Auto-Scrolling Text</h1>
<div class="vertical-marquee">
<div class="marquee-content">
<p>First line of scrolling text.</p>
<p>Second line of scrolling text.</p>
<p>Third line of scrolling text.</p>
</div>
</div>
</body>
</html>
/* Horizontal Auto-Scrolling */
.marquee {
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite;
border: 1px solid #000;
background-color: rgb(198, 236, 198);
padding: 10px;
width: 100%;
}
.marquee p {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
/* Vertical Auto-Scrolling */
.vertical-marquee {
height: 100px; /* Adjust based on your needs */
overflow: hidden;
position: relative;
border: 1px solid #000;
background-color: rgb(198, 236, 198);
box-sizing: border-box;
}
.marquee-content {
position: absolute;
top: 100%;
animation: vertical-marquee 6s linear infinite;
}
.vertical-marquee p {
margin: 0;
height: 100px; /* Same as the container height */
line-height: 100px; /* Center the text vertically */
}
@keyframes vertical-marquee {
0% {
top: 100%;
}
100% {
top: -300%; /* Adjust based on the number of lines */
}
}
/* Pause on Hover */
.marquee:hover p,
.vertical-marquee:hover
.marquee-content {
animation-play-state: paused;
}
Output:
|
