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

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

আচ্ছা, তার আগে এখান থেকে ফাইলটা ডাউনলোড  করে নিন। আমি সব গুলো উদাহরন একটি html ফাইলে দিয়ে দিয়েছি।

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

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

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

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

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

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

<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
এটার কোডঃ

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

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

এটার কোডঃ

<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
এটার কোডঃ

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

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