কিভাবে শিরোনাম গুলো একদিক থেকে অন্য দিকে মুভ করে আস্তে আস্তে যায়।

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

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

HTML এর <marquee> নামে একটা ট্যাগ আছে যার মাধ্যমে এরকম স্ক্রোলিং টেক্সট কোন সাইটে বসানো যায়। এটা দিয়ে যে কোন টেক্সট বা ইমেজ right থেকে left, left থেকে right, top থেকে bottom অথবা bottom থেকে top এ স্ক্রোল করা যায়।

এটার কোডঃ

1	Your Text will go here

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

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

এটার কোডঃ

1	Your Text will go here

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

এটার কোডঃ

1	Your Text will go here

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

1 2 3

Slow scroll speed Medium scroll speed Fast scroll speed

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

1

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

সুন্দর না?

আচ্ছা, এটা তো গেলো ডান থেকে বামে, বা বাম থেকে ডানে। আমরা ইচ্ছে করলে উপর থেকে নিচে বা নিচের থেকে উপরেও স্ক্রোল করতে পারি।
এটার কোডঃ

1	Your  scrolling up text goes here

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

Share on Google Plus

About KURURA

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.