আপনার ওয়েব সাইটটা কত দ্রুত জনপ্রিয় হবে তা একদিকে যেমন সাইটের কন্টেন্ট এর উপর নির্ভর করে অন্যদিকে সাইটের ইন্টারফেসের ডিজাইনের উপরও নির্ভর করে। আমরা বিভিন্ন সাউটে পেজ ওপেন করার সাথে সাথেই বিশেষ কিছু লেখা এনিমেশন হতে দেখি, যা ভিজিটরদের জন্য কোন গুরুত্বপূর্ণ মেসেজ, কোন বিশেষ অফার বা কোন বিশেষ খবরের হেডলাইন হতে পারে। যদি ঐ খবরটি সাধারণভাবে ওয়েব পেজের কোন একটি অংশে সাধারণ ভাবে রাখা হয় তাহলে হয়তবা অনেকেরই দৃষ্টি এরিয়ে যেতে পারে।কিন্তু এতে যদি বিশেষ কোন টেক্সট ইফেক্ট ব্যবহার করা হয় তাহলে তা বেশ আকর্ষণীয় হবে এবং সহজেই সকলের নজরে আসবে।আমরা দেখি কিভাবে এ ধরণের টেক্সট ইফেক্ট তৈরি করা যায়।
প্রজেক্ট সম্পর্কে কিছু কথা
আমাদের প্রজেক্টটিতে পেজ লোড হওয়ার সাথে সাথেই বাম কর্ণার থেকে একটা greeting message প্রদর্শণ করবে। message টি আস্তে আস্তে বড় হবে। কিছুক্ষণ থাকার পর চলে যাবে।একবার দেখে নেয়া যাক আমরা কি তৈরি করতে যাচ্ছি…….
প্রয়োজনীয় কোড
<html> <head> <script> //Change the message below var themessage="Welcome to Bangladesh." var fontsize=6 //Below determines how long the message will appear before disappearing. 3000=3 seconds var appearfor=3000 function position_at_top(){ if (document.layers) document.test.top=pageYOffset else if (document.all){ test.innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>' setTimeout("test.style.top=document.body.scrollTop+10;test.style.left=document.body.scrollLeft+10",100) } else if (document.getElementById){ document.getElementById("test").innerHTML='<div align=center><font face="Arial">'+themessage+'</font></div>' document.getElementById("test").style.top=pageYOffset } } function expand(){ if (document.layers){ document.test.document.write('<div align=center style="font-size:'+fontsize+'px"><font face="Arial">'+themessage+'</font></div>') document.test.document.close() } else if (document.all) test.style.fontSize=fontsize+'px' else if (document.getElementById) document.getElementById("test").style.fontSize=fontsize+'px' fontsize+=5 if (fontsize>50){ if (document.layers) setTimeout("document.test.visibility='hide'",appearfor) else if (document.all) setTimeout("test.style.visibility='hidden'",appearfor) else if (document.getElementById) setTimeout("document.getElementById('test').style.visibility='hidden'",appearfor) return } else setTimeout("expand()",90) } </script> <style> body{background:#000;} #test{position:absolute; color:#f00;} </style> </head> <body> <div id="test"></div> <body onload="position_at_top();expand()"> </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 করলে পেজ লোড হওয়ার সাথে সাথেই বাম কর্ণার থেকে একটা greeting message দেখতে পাবেন।
প্রজেক্ট বিশ্লেষণ
var themessage=”Welcome to Bangladesh.” এই অংশের লেখাগুলো পরিবর্তন করে নিজের পছন্দ অনুযায়ী যে কোন লেখা greeting message হিসেবে প্রদর্শণ করা যাবে।
var fontsize=6 এর মাধ্যমে message এর ফন্ট সাইজ ঠিক করে দেয়া হয়েছে।
if (fontsize>50) এর মাধ্যমে লেখাটি কত বড় হবে তা নির্দিষ্ট করে দেয়া হয়েছে।
setTimeout(“expand()”,90) এর মাধ্যমে message টি কতক্ষণ প্রদর্শিত হবে তা নিধারণ করে দেয়া হয়েছে।
<style>
body{background:#000;}
#test{position:absolute; color:#f00;}
</style>
অংশের মধ্যে
body{background:#000;} এর মাধ্যমে পেজের ব্যকগ্রাউন্ড কালার কালো করা হয়েছে।
#test{position:absolute; color:#f00;} এর মাধ্যমে message টির কালার কালো করা হয়েছে।
……………………………………………………………………………..
আজ এখানেই শেষ করছি। সবার জন্য শুভকামনা রইল ।
