Hello developers, today in this blog, you'll learn to create a Responsive Scrolling Text Animation using HTML & CSS.
Scrolling is the sliding movement of images, video, or text across a display screen either vertically or horizontally. Scrolling can be done with or without user intervention. This feature is provided by most applications and smart devices that display contents that are too big to fit entirely on the screen. The act of moving text from right to left or up and down on a screen to view text that cannot be contained within a single display image.
In this blog (Responsive Scrolling Text Animation) on the webpage, the scrolling text has been made. The text is made to move from the right to the left direction. The text has been made bold and the background color has been used for the scrollbar. In the scrollbar. The text is also made to move vertically, that is from top to bottom and vise versa. To make the text move from right to left, the CSS animation @keyframe property has been used.
The source code of this Responsive Scrolling Text Animation is given below, if you want the source code of this program, you can copy it. You can use this Responsive Scrolling Text Animation with your creativity and can take this project to the next level.
Responsive Scrolling Text Animation [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
background: #DA4453;
background: -webkit-linear-gradient(to right, #89216B, #DA4453);
background: linear-gradient(to right, #89216B, #DA4453);
}
section {
background-color: #12192c;
color: white;
font-family: helvetica;
text-transform: uppercase;
overflow-x: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 10px;
}
section div {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
min-width: 100%;
}
section div .news-message {
display: flex;
flex-shrink: 0;
height: 50px;
align-items: center;
animation: slide-left 20s linear infinite;
}
section div .news-message p {
font-size: 2.0em;
font-weight: 100;
padding-left: 0.5em;
}
@keyframes slide-left {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 20px;
color:#fff;
text-align: center;
}
Thank you for reading our blog. If you face any problem creating this Responsive Scrolling Text Animation using HTML & CSS, then contact us or comment us. We'll try to provide the solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team