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

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

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

<html>
<head>
<title>Animated text.</title>

<style type="text/css">
body{background:#000;
text-align:center;}

</style>

</head>

<body>
<h1>
<script language="JavaScript1.2">

var message="Welcome to BANGLADESH"
var neonbasecolor="gray"
var neontextcolor="#f00"
var flashspeed=150 //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</h1>
</body>

</html>

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

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

<style type=”text/css”>

body{background:#000;

text-align:center;}

</style>

এই কোডটুকুর মাধ্যমে CSS যুক্ত করে পেজের ব্যকগ্রাউন্ড কালার কালো করা হয়েছে। আপনি ইচ্ছা করলে #000 পরিবর্তন করে অন্য রং এর করে দিতে পারেন। text-align:center; এর মাধ্যমে লেখাটিকে সেন্টারে নিয়ে আসা হয়েছে।

var message=”Welcome to BANGLADESH” এর স্হানে  Welcome to BANGLADESH এর পরিবর্তে যা লেখা যাবে তাই এনিমেশন হবে।

var neonbasecolor=”gray” এটি এনিমেটেড টেক্সটটির মূল কালারটি নির্দেশ করে (অর্থাৎ এনিমেশনের পূর্বে যে রং এ লেখাটি দেখা যাবে)।

var neontextcolor=”#f00″ এটি এনিমেটেড টেক্সটটির যে রং এ এনিমেশন হবে তা নির্দেশ করে।

ইচ্ছা করলে “#f00” অংশটুকু পরিবর্তন করে যে কোন রং এ পরিবর্তন করা যাবে।

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

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

 

comments

4 কমেন্টস

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.