In the world of web design, catching the user’s attention is crucial. One effective way to engage your audience is by incorporating dynamic elements into your website. One such element is a scrolling text in the title, often used to highlight important announcements or promotions. In this article, we’ll delve into the provided code snippet and explain how to create an engaging title scrolling text using CSS.
Table of Contents
The HTML Structure:
Let’s start by examining the HTML structure:
<section class="top-notification">
<p>This is a scrolling text</p>
</section>
Here, we have a simple HTML structure containing a <section> element with a class of “top-notification” that wraps a <p> (paragraph) element containing the text to be displayed.
The CSS Styling:
Now, let’s break down the CSS styles applied to achieve the scrolling text effect:
.top-notification {
/* position: fixed; */
top: 0;
left: 0;
width: 100%;
height: auto;
background-color: #fce6c8;
padding: 0.375rem 0;
z-index: 9;
}
.top-notification p {
text-align: right;
color: #89162E;
margin: 0;
font-size: 18px;
white-space: nowrap;
animation: scrollText 20s linear infinite;
}
@keyframes scrollText {
to {
transform: translateX(-100%);
}
}
Breakdown of the CSS:
.top-notification:
position: fixed;: Commented out, but this property can be uncommented if you want the notification bar to stay fixed at the top of the viewport even when scrolling.top: 0; left: 0;: Positions the notification bar at the top-left corner of its containing element (or the viewport if positioned fixed).width: 100%; height: auto;: Makes the notification bar span the entire width of its container with an automatic height based on its content.background-color: #fce6c8;: Sets the background color to a light, appealing shade.padding: 0.375rem 0;: Adds padding to the top and bottom of the notification bar for better visual appeal.
z-index: 9;: Specifies the stacking order of the notification bar, ensuring it appears above other elements.
.top-notification p:
text-align: right;: Aligns the text to the right within the paragraph.color: #89162E;: Sets the text color to a dark, contrasting shade for better visibility.margin: 0;: Removes any default margin to ensure the text is positioned precisely.font-size: 18px;: Defines the font size of the text.white-space: nowrap;: Prevents the text from wrapping to the next line, ensuring a single-line presentation.animation: scrollText 20s linear infinite;: Applies the “scrollText” animation with a duration of 20 seconds, linear timing function, and infinite repetition.
@keyframes scrollText:
to { transform: translateX(-100%); }: Defines the endpoint of the animation, where the text is translated horizontally by -100%, effectively moving it to the left and creating the scrolling effect.
Output
This is a scrolling text
Conclusion
By combining HTML and CSS, you can effortlessly implement a captivating title scrolling text that adds a dynamic touch to your website, effectively grabbing the user’s attention and conveying important information in a visually appealing manner.
I hope this article helped you to learn How to create scrolling text in CSS. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.
Want to build professional website for your Business or Store, Get a free quote here
Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”
