Hello, Assalamualaikum! how are you I hope you are well by the grace of God. Today I will teach you how to create a special type of notice board text scroll for new bloggers. And you can use the source code of Text Scroll.
Text scrolls using HTML and CSS.
Text slides use HTML and CSS.
Automatic text slide.
First, create the CSS you see below.
CSS:
<style>
.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
background: purple;
color: black;
border: 1px solid black;
}
.scroll-left p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* start position i.e. the position from which the text will scroll */
transform:translateX(100%);
/* Apply animation to this element - animation set up now */
animation: scroll-left 30s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
Now, create the HTML. So check it out and make it.
HTML:
<div class="scroll-left">
<p>Enter what you want to scroll here </p>
</div>
Examples and source code: HTML and CSS;
<style>
.scroll-left {
height: 50px;
overflow: hidden;
position: relative;
background: yellow;
color: orange;
border: 1px solid orange;
}
.scroll-left p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform:translateX(100%);
animation: scroll-left 15s linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="scroll-left">
<p>Welcome to............... </p>
</div>
Results:
Welcome to...............
If you can complete the task correctly. Then using this source code you can scroll the text.
My Talk:
Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!
0 Comments