হ্যালো, আসসালামুআলাইকুম! কেমন আছেন? আশা করি আল্লাহর রহমতে ভালো আছেন । আজ নতুন ব্লগারদের জন্য একটি বিশেষ ধরনের নোটিশ বোর্ড টেক্সট স্ক্রোল তৈরি করা শেখাব । এবং টেক্সট স্ক্রোল এর সোর্স কোড নিয়ে ব্যবহার করতে পারবেন।



টেক্সট স্ক্রোল এইচটিএমএল এবং সিএসএস ব্যবহার করে ।

টেক্সট স্লাইড এইচটিএমএল এবং সিএসএস ব্যবহার করে ।

অটোমেটিক টেক্সট স্লাইড ।



প্রথম আপনি নিচে থেকে দেখে দেখে সিএসএস তৈরি করুন ।

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;
 /* শুরুর অবস্থান অর্থাৎ যে অবস্থান থেকে টেক্সট স্ক্রোল করবে */
 transform:translateX(100%);
 /* Apply animation to this element - এখনে অ্যানিমেশন সেট আপ */
 animation: scroll-left 30s linear infinite;
}
/* Move it (define the animation - অ্যানিমেশন নির্ধারণ করা) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%);
 }
 100% {
 transform: translateX(-100%);
 }
}
</style>

এবার , এইচটিএমএল তৈরি করতে হবে । তাই দেখে দেখে তা তৈরি করুন।

HTML:

<div class="scroll-left">

 <p>এখানে আপনি যা স্ক্রোল করতে চান তা লিখুন  </p>

</div>


উদাহরণ এবং সোর্স কোড : এইচটিএমএল এবং সিএসএস ;


<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>




ফলাফল বা রেজাল্ট :










আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি টেক্সট স্ক্রোল করতে পারবেন ।

Welcome to..............

    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!