আপনার ওয়েব সাইটটা কত দ্রুত জনপ্রিয় হবে তা একদিকে যেমন সাইটের কন্টেন্ট এর উপর নির্ভর করে অন্যদিকে সাইটের ইন্টারফেসের ডিজাইনের উপরও নির্ভর করে। আমরা বিভিন্ন সাউটে পেজ ওপেন করার সাথে সাথেই বিশেষ কিছু লেখা এনিমেশন হতে দেখি, যা ভিজিটরদের জন্য কোন গুরুত্বপূর্ণ মেসেজ, কোন বিশেষ অফার বা কোন বিশেষ খবরের হেডলাইন হতে পারে। যদি ঐ খবরটি সাধারণভাবে ওয়েব পেজের কোন একটি অংশে সাধারণ ভাবে রাখা হয় তাহলে হয়তবা অনেকেরই দৃষ্টি এরিয়ে যেতে পারে।কিন্তু এতে যদি বিশেষ কোন টেক্সট ইফেক্ট ব্যবহার করা হয় তাহলে তা বেশ আকর্ষণীয় হবে এবং সহজেই সকলের নজরে আসবে।আমরা দেখি কিভাবে এ ধরণের টেক্সট ইফেক্ট তৈরি করা যায়।
প্রজেক্ট সম্পর্কে কিছু কথা
আমাদের প্রজেক্টটিতে কোন একটি ওয়েব পেজে বিশেষ কোন রঙের একটি লেখার উপর চলমান অপর একটি রঙের ইফেক্ট প্রদর্শণ করবে। একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…….
প্রয়োজনীয় কোড
<html>
<head>
<style>
body{background:#000;
}
h1{text-align:center;}
</style>
<t itle>Text effect</title>
</head>
<body>
<h1><script language="JavaScript1.2">
var message="Welcome to www.bigganprojukti.com "
var neonbasecolor="#f00"
var neontextcolor="#0f0"
var neontextcolor2="#FFFFA8"
var flashspeed=150 // speed of flashing in milliseconds
var flashingletters=4 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0 // the pause between flash-cycles 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++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
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 করলে লেখাটিতে কালার ইফেক্টটি দেখতে পাবেন।
প্রজেক্ট বিশ্লেষণ
var message=”Welcome to www.bigganprojukti.com ” এই অংশের লেখাগুলো পরিবর্তন করে নিজের পছন্দ অনুযায়ী যে কোন লেখা প্রদর্শণ করা যাবে।
var neonbasecolor=”#f00″ এর মাধ্যমে মূল ফন্ট কালার লাল করে দেয়া হয়েছে।
var neontextcolor=”#0f0″
var neontextcolor2=”#FFFFA8″
এর মাধ্যমে লেখাটির উপরে দুটি রং এর চলমান কালার ইফেক্ট দেয়া হয়েছে।
var flashspeed=150এর মাধ্যমে কালার ইফেক্ট টি কত দ্রুত চলাচল করবে তা নিধারণ করে দেয়া হয়েছে।
<style>
body{background:#000;
}
h1{text-align:center;}
</style>
অংশের মধ্যে
body{background:#000;} এর মাধ্যমে পেজের ব্যকগ্রাউন্ড কালার কালো করা হয়েছে।
h1{text-align:center;} এর মাধ্যমে লেখাটিকে সেন্টারে আনা হয়েছে।
……………………………………………………………………………..
আজ এখানেই শেষ করছি। সবার জন্য শুভকামনা রইল ।
