তৈরি করুন আকর্ষণীয় টেক্সট এনিমেশন
একটা ওয়েব সাইটের সুন্দর ডিজাইন, আকর্ষণীয় নেভিগেশন, পেজে আকর্ষণীয় ইফেক্টের ব্যবহার, ইত্যাদি এবং সামগ্রিকভাবে ব্যবহার বান্ধব ইন্টারফেস একই ধরণের বেশ কিছু ওয়েব সাইটের মধ্যে থেকে পাঠককে একটিকে বেছে নিতে সাহায্য করে। কিন্তু একটা ওয়েব পেজে এনিমেশন গ্রাফিক্স খুবই সতর্কতার সাথে ব্যবহার করতে হয়, যেন পেজের সাইজ না বৃদ্ধি পায়। সাধারণত ফ্লাসে তৈরি এনিমেশন ব্যবহার করলে পেজের সাইজ অত্যাধিক বৃদ্ধি পায়। আমরা এর পরিবর্তে CSS, JavaScript বা jQuery ব্যবহার করতে পারি। এখন আমরা CSS এবং JavaScript ব্যবহার করে এ ধরণেরই একটা টেক্সট এনিমেশন তৈরির কৌশল দেখব।
একবার দেখে নেয়া যাক আমরা ঠিক কি তৈরি করতে যাচ্ছি
প্রয়োজনীয় HTML কোড
<html>
<head>
<title>Text animation</title>
</head>
<body>
<div id=”matrix”>Hello World</div>
</body>
</html>
প্রয়োজনীয় CSS কোড
<style type=”text/css”>
.matrix { font-family:Lucida Console, Courier, Monotype;
font-size:24pt;
text-align:center;
width:20px;
padding:0px;
margin:0px;
}
</style>
প্রয়োজনীয় JAVASCRIPT কোড
<script type=”text/javascript” language=”JavaScript”>
<!–
var rows=11; // must be an odd number
var speed=40; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign=”default” //enter “center” to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById(“matrix”):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=” “+ma_txt+” “;
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement(“table”);
ma_tab.setAttribute(“border”, 0);
ma_tab.setAttribute(“align”, effectalign);
ma_tab.style.backgroundColor=”#000000″;
ma_bod=document.createElement(“tbody”);
for (x=0; x<rows; x++) {
ma_row=document.createElement(“tr”);
for (y=0; y<columns; y++) {
matemp=document.createElement(“td”);
matemp.setAttribute(“id”, “Mx”+x+”y”+y);
matemp.className=”matrix”;
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);
}
ma_bod.appendChild(ma_row);
}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab=’<ta’+'ble align=”‘+effectalign+’” border=”0″ style=”background-color:#000000″>’;
for (var x=0; x<rows; x++) {
ma_tab+=’<t’+'r>’;
for (var y=0; y<columns; y++) {
ma_tab+=’<t’+'d id=”Mx’+x+’y'+y+’”> </’+'td>’;
}
ma_tab+=’</’+'tr>’;
}
ma_tab+=’</’+'table>’;
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;
}
ma_bod=setInterval(“mytricks()”, speed);
}
function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById(“Mx”+(ma_row-1)+”y”+y);
matemp.firstChild.nodeValue=m_coch[y];
}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];
}
matemp.style.color=”#00ff00″;
matemp.style.fontWeight=”bold”;
}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById(“Mx”+(ma_row-2)+”y”+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight=”normal”;
matemp.style.color=”#00ff00″;
}
if (ma_row>2) {
matemp=(w3c)?document.getElementById(“Mx”+(ma_row-3)+”y”+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color=”#009900″;
}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) clearInterval(ma_bod);
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById(“Mx”+ytmp+”y”+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];
}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];
}
mtmp.style.color=”#33ff66″;
mtmp.style.fontWeight=”bold”;
}
if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout(“zoomer(“+ycol+”)”, speed);
}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById(“Mx”+(m_copo[ycol]-201)+”y”+ycol);
mtem=document.getElementById(“Mx”+(200+rows-m_copo[ycol]–)+”y”+ycol);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+”y”+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]–)+”y”+ycol];
}
mtmp.style.fontWeight=”normal”;
mtem.style.fontWeight=”normal”;
setTimeout(“zoomer(“+ycol+”)”, speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById(“Mx”+(m_copo[ycol]-101)+”y”+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById(“Mx”+(100+rows-m_copo[ycol]–)+”y”+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+”y”+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]–)+”y”+ycol];
mtem.innerHTML=String.fromCharCode(160);
}
setTimeout(“zoomer(“+ycol+”)”, speed);
}
}
// –>
</script>
প্রজেক্ট সম্পর্কিত কিছু কথা
প্রথমে একটা Notepad Open করে উপরের HTML Code টুকু লিখুন। HTML Code এর <head></head> এর মাঝখানে কোন অংশে <style></style> ট্যাগ যুক্ত করে এর মাঝে CSS Code টুকু লিখুন এবং এর পর Javascript Code টুকু লিখুন । File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন। এখন Mozila দিয়ে index.html open করলে দেখতে পাবেন তৈরি হয়ে গেছে আকর্ষণীয় এনিমেটেড টেক্সট ইফেক্ট এবং Hello World টেক্সটটি এনিমেশন হবে।
প্রজেক্ট বিশ্লেষণ
<div id=”matrix”>Hello World</div> এর মাধ্যমে কোন লেখাটি এনিমেশন হবে তা নির্ধারণ করে দেয়া হয়েছে।
.matrix { font-family:Lucida Console, Courier, Monotype;
font-size:24pt;
text-align:center;
width:20px;
padding:0px;
margin:0px;
}
CSS অংশে font-size:24pt; এর মাধ্যমে ফন্ট সাইজ কত হবে তা নির্ধারণ করে দেয়া হয়েছে। , text-align:center; লেখাটিকে মাঝে নেয়া হয়েছ।
Javascript অংশে কোডের সাথে যুক্ত comments দেখে এনিমেশনের গতি এবং অন্যান্য ইফেক্ট পরিবর্তন করতে পারবেন। এবং যেখানে #চিহ্নিত মান অর্থাৎ #000ff0 এ ধরণের মান যেখানে রয়েছে সেগুলো দেখে ব্যকগ্রাউন্ড কালার বিভিন্ন ইফেক্ট এর টেক্সট কালার পরিবর্তন করতে পারবেন। ইচ্ছা করলে মাল্টি কালার টেক্সট ইফেক্টও তৈরি করতে পারবেন।
সম্পূর্ণ কোড
<html>
<head>
<title>Text animation</title>
<style type="text/css">
.matrix { font-family:Lucida Console, Courier, Monotype;
font-size:20pt;
text-align:center;
width:20px;
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript" language="JavaScript">
<!--
var rows=9; // must be an odd number
var speed=15; // lower is faster
var reveal=2; // between 0 and 2 only. The higher, the faster the word appears
var effectalign="default" //enter "center" to center it.
var w3c=document.getElementById && !window.opera;;
var ie45=document.all && !window.opera;
var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho;
var m_coch=new Array();
var m_copo=new Array();
window.onload=function() {
if (!w3c && !ie45) return
var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];
ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;
ma_txt=" "+ma_txt+" ";
columns=ma_txt.length;
if (w3c) {
while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);
ma_tab=document.createElement("table");
ma_tab.setAttribute("border", 0);
ma_tab.setAttribute("align", effectalign);
ma_tab.style.backgroundColor="#000000";
ma_bod=document.createElement("tbody");
for (x=0; x<rows; x++) {
ma_row=document.createElement("tr");
for (y=0; y<columns; y++) {
matemp=document.createElement("td");
matemp.setAttribute("id", "Mx"+x+"y"+y);
matemp.className="matrix";
matemp.appendChild(document.createTextNode(String.fromCharCode(160)));
ma_row.appendChild(matemp);
}
ma_bod.appendChild(ma_row);
}
ma_tab.appendChild(ma_bod);
matrix.appendChild(ma_tab);
} else {
ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';
for (var x=0; x<rows; x++) {
ma_tab+='<t'+'r>';
for (var y=0; y<columns; y++) {
ma_tab+='<t'+'d id="Mx'+x+'y'+y+'"> </'+'td>';
}
ma_tab+='</'+'tr>';
}
ma_tab+='</'+'table>';
matrix.innerHTML=ma_tab;
}
ma_cho=ma_txt;
for (x=0; x<columns; x++) {
ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));
m_copo[x]=0;
}
ma_bod=setInterval("mytricks()", speed);
}
function mytricks() {
x=0;
for (y=0; y<columns; y++) {
x=x+(m_copo[y]==100);
ma_row=m_copo[y]%100;
if (ma_row && m_copo[y]<100) {
if (ma_row<rows+1) {
if (w3c) {
matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);
matemp.firstChild.nodeValue=m_coch[y];
}
else {
matemp=document.all["Mx"+(ma_row-1)+"y"+y];
matemp.innerHTML=m_coch[y];
}
matemp.style.color="#00ff00";
matemp.style.fontWeight="bold";
}
if (ma_row>1 && ma_row<rows+2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];
matemp.style.fontWeight="normal";
matemp.style.color="#00ff00";
}
if (ma_row>2) {
matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];
matemp.style.color="#009900";
}
if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;
else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);
else if (ma_row<rows+2) m_copo[y]++;
else if (m_copo[y]<100) m_copo[y]=0;
}
else if (Math.random()>0.9 && m_copo[y]<100) {
m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));
m_copo[y]++;
}
}
if (x==columns) clearInterval(ma_bod);
}
function zoomer(ycol) {
var mtmp, mtem, ytmp;
if (m_copo[ycol]==Math.floor(rows/2)+1) {
for (ytmp=0; ytmp<rows; ytmp++) {
if (w3c) {
mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);
mtmp.firstChild.nodeValue=m_coch[ycol];
}
else {
mtmp=document.all["Mx"+ytmp+"y"+ycol];
mtmp.innerHTML=m_coch[ycol];
}
mtmp.style.color="#33ff66";
mtmp.style.fontWeight="bold";
}
if (Math.random()<reveal) {
mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));
ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);
}
if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);
m_copo[ycol]+=199;
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]>200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);
mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];
mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];
}
mtmp.style.fontWeight="normal";
mtem.style.fontWeight="normal";
setTimeout("zoomer("+ycol+")", speed);
}
else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);
if (m_copo[ycol]>100 && m_copo[ycol]<200) {
if (w3c) {
mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);
mtmp.firstChild.nodeValue=String.fromCharCode(160);
mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);
mtem.firstChild.nodeValue=String.fromCharCode(160);
}
else {
mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];
mtmp.innerHTML=String.fromCharCode(160);
mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];
mtem.innerHTML=String.fromCharCode(160);
}
setTimeout("zoomer("+ycol+")", speed);
}
}
// -->
</script>
</head>
<body>
<div id="matrix">Hello World</div>
</body>
</html>
………………………………………………………………………………..
এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল ।
লেখাটি পছন্দের তালিকায় যুক্ত করুন ☼
লেখাটি পছন্দ হলে বন্ধুদের সাথে শেয়ার করুন। শেয়ার করার জন্য উপরের বাটনে ক্লিক করুন
পরবর্তী আপডেট পেতে চাইলে আর.এস.এস ফীড অথবা ই-মেইল এর মাধ্যমে সাবস্ক্রাইব করুন
বিজ্ঞান প্রযুক্তি ডট কম এর ফেইসবুক পেইজ বা গ্রুপ অথবা টুইটার প্রোফাইলে যোগ দিন
লেখকঃ অসীম কুমার সম্পর্কে কিছু কথা...
অসীম কুমার বিজ্ঞান প্রযুক্তি ডট কম এর একজন অতিথি লেখক।তিনি একজন ইলেকট্রনিক্সের শিক্ষার্থী। তিনি বাংলা ভাষায় প্রযুক্তি চর্চাকে এগিয়ে নিতে, "প্রযুক্তি চর্চার মুক্তমঞ্চ www.tectuts.com পরিচালনা করছেন। তাকে ফেসবুকে বন্ধু হিসেবে যোগ করতে পারেন।
very nice………… Thanks…….
অসীম দা কে অনেক ধন্যবাদ … আজকেই এটা চেষ্টা করব …
কোডটি শেয়ার করার জন্য ধন্যবাদ।
খুবই ভালো লাগলো আমি এটা চেষ্টা করেছি কিন্তু আমি এটা কিভাবে আমার ওয়েব সাইটে ব্যবহার করব অনুগ্রহ করে সেটা বিস্তারিত লিখবেন। ধন্যবাদ!
পোস্ট টি ভালো হয়ে ছে। চালিয়ে যান।