আপনার ওয়েব সাইটটা কত দ্রুত জনপ্রিয় হবে তা একদিকে যেমন সাইটের কন্টেন্ট এর উপর নির্ভর করে অন্যদিকে সাইটের ইন্টারফেসের ডিজাইনের উপরও নির্ভর করে। আমরা বিভিন্ন সাউটে পেজ ওপেন করার সাথে সাথেই বিশেষ কিছু লেখা এনিমেশন হতে দেখি, যা ভিজিটরদের জন্য কোন গুরুত্বপূর্ণ মেসেজ, কোন বিশেষ অফার বা কোন বিশেষ খবরের হেডলাইন হতে পারে। যদি ঐ খবরটি সাধারণভাবে ওয়েব পেজের কোন একটি অংশে সাধারণ ভাবে রাখা হয় তাহলে হয়তবা অনেকেরই দৃষ্টি এরিয়ে যেতে পারে।কিন্তু এতে যদি বিশেষ কোন টেক্সট ইফেক্ট ব্যবহার করা হয় তাহলে তা বেশ আকর্ষণীয় হবে এবং সহজেই সকলের নজরে আসবে।

আমরা দেখি কিভাবে এ ধরণের টেক্সট ইফেক্ট তৈরি করা যায়।

একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি

প্রয়োজণীয় কোড

<h2 id="fly">Welcome to Bangladesh.</h2>
<script type="text/javascript">

message = document.getElementById("fly").innerHTML; // $ = taking a new line
distance = 50; // pixel(s)
speed = 200; // milliseconds

var txt="",
num=0,
num4=0,
flyofle="",
flyofwi="",
flyofto="",
fly=document.getElementById("fly");

function stfly() {
for(i=0;i != message.length;i++) {
if(message.charAt(i) != "$")
txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>";
else
txt += "<br>";
}
fly.innerHTML = txt;
txt = "";
flyofle = fly.offsetLeft;
flyofwi = fly.offsetWidth;
flyofto = fly.offsetTop;
fly2b();
}

function fly2b() {
if(num4 != message.length) {
if(message.charAt(num4) != "$") {
var then = document.getElementById("n" + num4);
then.style.left = flyofle - then.offsetLeft + flyofwi / 2;
then.style.top = flyofto - then.offsetTop + distance;
fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5);
}
num4++;
setTimeout("fly2b()", speed);
}
}

function fly3(target,lef2,num2,top2,num3) {
if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1)) {
if(lef2 >= 0)
lef2 -= num2;
else
lef2 += num2 * -1;
if(Math.floor(lef2) != -1) {
document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2);
} else {
document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2 + 1);
}
if(lef2 >= 0)
top2 -= num3
else
top2 += num3 * -1;
if(Math.floor(top2) != -1)
document.getElementById(target).style.top = Math.floor(top2);
else
document.getElementById(target).style.top = Math.floor(top2 + 1);
setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50)
}
}

stfly()

</script>

প্রথমে একটা Notepad Open করে উপরের Code টুকু লিখুন । File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html  দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন। এখন Mozila দিয়ে index.html open করলে আকর্ষণীয় এনিমেটেড টেক্সট ইফেক্টটি দেখতে পাবেন।

প্রজেক্ট সম্পর্কে কিছু কথা

<h2 id=”fly”>Welcome to Bangladesh.</h2> অংশের Welcome to Bangladesh. লেখাটির পরিবর্তে যা লেখা যাবে তাই পেজ ব্রাইজারে লোড হয়ার সময় প্রদর্শণ করবে।

………………………………………………………………………………..

আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল ।

comments

8 কমেন্টস

  1. অসীম কুমার ভাইয়া
    মজিলা আর ক্রম দিয়ে ওপেন করলে হয় । কিন্তু ইনটারনেট এক্সপ্লোরার দিয়ে হয় না , ব্যপারটা কি একটু ক্লিয়ার করবেন । আপনি অবশ্য বলছেন মজিলা দিয়ে ওপেন করতে । আমি শুধু একটু ক্লিয়ার হতে চাচ্ছি। প্লিজ………।।

    • ইনটারনেট এক্সপ্লোরার ব্রাওজারে JavaScript, CSS3, jQuery ইত্যাদি ভালভাবে সাপোর্ট করে না এজন্যই।
      ধন্যবাদ।

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.