About 3 months ago 1994 Views

Verified User
*
Feroj
's Bio
আমাদের সাইটে আপনাকে স্বাগতম। টেক বিষয়ে যেকোন তথ্য পেতে আমাদের সাইট ভিজিট করুন।
Home » Wordpress » HTML Marquee – কোন টেক্সটকে মুভ করা। [খবরের হেডলাইনের মত]

বিভিন্ন সাইটে গেলে দেখা যায় প্রধান শিরোনাম গুলো একদিক থেকে অন্য দিকে মুভ করে আস্তে আস্তে যায়। যেমন প্রথম আলোর ওয়েব সাইটে গেলে শিরোনাম নামে কিছু লেখা ডান পাশ থেকে বাম পাশে আস্তে আস্তে মুভ করে যায়। এটা করা হয় কি দিয়ে বা কি ভাবে?

HTML এর <marquee> নামে একটা ট্যাগ আছে যার মাধ্যমে এরকম স্ক্রোলিং টেক্সট কোন সাইটে বসানো যায়। এটা দিয়ে যে কোন টেক্সট বা ইমেজ right থেকে left, left থেকে right, top থেকে bottom অথবা bottom থেকে top এ স্ক্রোল করা যায়।
একটা উদাহরন দেখিঃ
Your Text will go here
এটার কোডঃ

1
<marquee behavior="slide" direction="left">Your Text will go here</marquee>

এটা শুধু ডান দিক থেকে বাম দিকে আসবে। এসে থেমে যাবে। আর direction=”left” দিয়ে কোন দিক থেকে কোন দিকে যাবে তা বুঝানো হয়েছে। direction=”right” দিয়ে দেখুন কি হয়।

আমরা চাচ্ছি প্রথম আলোর ওয়েব সাইটের মতো। ডান থেকে বামে এসে থেমে যাবে না। আবার ডান থেকে বামে আসবে। তা উপরের কোডে একটু পরিবর্তন করলেই হয়ে যাবে।  behavior=”slide” এর জাগায় behavior=”scroll” দিলেই হবে। উদাহরনঃ
Your scrolling text goes here
এটার কোডঃ

1
<marquee behavior="scroll" direction="left">Your Text will go here</marquee>

আচ্ছা, উপরের লেখাটা ডান থেকে বামে চলে যাচ্ছে। আমাদের পড়ার সুযোগ দিচ্ছে না। আমরা চাচ্ছি যখন আমরা পড়ব তখন তা স্ক্রোল করা বন্ধ করবে। এটা করার জন্য আমরা একটা inline JavaScript ব্যবহার করব। নিচের উদাহরনে মাউস রেখে দেখুন তা স্ক্রোল করা বন্ধ করে দিয়েছে।
Your Text will go here
এটার কোডঃ

1
<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">Your Text will go here</marquee>

সুন্দর না? একটা সমস্যা। আমরা নিজেদের মত স্পিড দিতে চাই। তা করার জন্য scrollamount ব্যবহার করতে পারি। যেমন scrollamount=”1″ তা সব চেয়ে কম স্পিডে চলবে। আর scrollamount=”1০” দিলে আরেকটু বেশি স্পিডে স্ক্রোল করবে।  নিচের উদাহরনটা দেখিঃ
Slow scroll speed
Medium scroll speed
Fast scroll speed
এটার কোডঃ

1
2
3
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>

এতক্ষন পর্যন্ত আমরা শুধুই টেক্সটকে স্ক্রোল করেছি। আমরা ইচ্ছে করলে যে কোন ইমেজকেও স্ক্রোল করতে পারি। নিচের উদাহরনটা দেখিঃ
Android
এটার কোডঃ

1
<marquee behavior="scroll" direction="left"><img src="http://jakir.me/wp-content/uploads/2013/02/android_logo-164x164.gif"  alt="Android" /></marquee>

সুন্দর না?

আচ্ছা, এটা তো গেলো ডান থেকে বামে, বা বাম থেকে ডানে। আমরা ইচ্ছে করলে উপর থেকে নিচে বা নিচের থেকে উপরেও স্ক্রোল করতে পারি। নিচের উদাহরন টা দেখুনঃ
Your  scrolling up text goes here
এটার কোডঃ

1
<marquee  behavior="scroll" direction="up">Your  scrolling up text goes here</marquee>

আমরা ইচ্ছে করলে টেক্সট সাইজ, কালার ইত্যাদি দিতে পারি। তা কিভাবে করতে হয় নিজে নিজে বের করতে পারবেন না?

1 responses to “HTML Marquee – কোন টেক্সটকে মুভ করা। [খবরের হেডলাইনের মত]”

  1. AbuhuryraVerified User
    (editor)

    কি রাগ হয়ছে নাকি কোন উত্তর দিচ্ছেন্না

Leave a Reply

Related Posts

নতুন ভাবে আপনিও আপনার wp সাইট এ verified user সিস্টেম করুন

Posted By: - 2 weeks ago - 8 Comments

TipsRain.Com এর পক্ষ থেকে সকলের প্রতি শুভ কামনা করে শুরু করছি আমার আজকের টিউটোরিয়াল। আপনারা দেখে থাকবেন যে facebook ,...
backlink করুন আপনার সাইট বাংলা সাইটের জন্য dofollow backlink 40+ site list

Posted By: - 3 weeks ago - 1 Comment

backlink করার জন্য বাংলাদেশি dofollow 40+ site link list আমরা জানি যে seo এর ক্ষেত্রে backlink কত টা গুরুত্বপূর্ণ ৷...
আপনার ওয়ার্ডপ্রেস সাইটে কাস্টমভাবে নোটিশ বোর্ড ব্যাবহার করুন কোন প্লাগিন ছাড়া।

Posted By: - 4 weeks ago - 4 Comments

প্রথমে আমার সালাম নিবেন। আশা করি ভালো আছেন। আমিও ভালো আছি। অনেক দিন পরে আপনাদের জন্য নিয়ে আসলাম অন্য রকম...
ফ্রিতে Bissobd প্রিমিয়ার থিমটি ডাউনলোড করেনিন * Live demo সহ

Posted By: - 1 month ago - 3 Comments

হ্যলো বন্ধুরা, সবাই কেমন আছো, আশা করি ভালো আছো আমিও আল্লাহ্‌ রহমতে ভালো আছি। কথা না বাড়িয়ে কাজি চলে যায়।...
কাস্টম ভাবে আপনার WordPress সাইটের মেইল সেন্ডার এর নাম পরিবর্তন করুন

Posted By: - 2 months ago - No Comments

কাস্টম ভাবে আপনার ওয়র্ডপ্রেস সাইটের মেইল সেন্ডার এর নাম পরিবর্তন করতে হলে আপনাকে আপনার Wordpress থিম এর functions.php ফাইল এ এই...