একটা ওয়েব সাইটের সুন্দর ডিজাইন, আকর্ষণীয় নেভিগেশন, পেজে আকর্ষণীয় ইফেক্টের ব্যবহার, ইত্যাদি এবং সামগ্রিকভাবে ব্যবহার বান্ধব ইন্টারফেস একই ধরণের বেশ কিছু ওয়েব সাইটের মধ্যে থেকে পাঠককে একটিকে বেছে নিতে সাহায্য করে। কিন্তু একটা ওয়েব পেজে এনিমেশন গ্রাফিক্স খুবই সতর্কতার সাথে ব্যবহার করতে হয়, যেন পেজের সাইজ না বৃদ্ধি পায়। সাধারণত ফ্লাসে তৈরি এনিমেশন ব্যবহার করলে পেজের সাইজ অত্যাধিক বৃদ্ধি পায়। আমরা এর পরিবর্তে 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+'”>&nbsp;</’+’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+'">&nbsp;</'+'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>

 

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

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

comments

83 কমেন্টস

  1. খুবই ভালো লাগলো আমি এটা চেষ্টা করেছি কিন্তু আমি এটা কিভাবে আমার ওয়েব সাইটে ব্যবহার করব অনুগ্রহ করে সেটা বিস্তারিত লিখবেন। ধন্যবাদ!

  2. Definitely believe that which you said. Your favorite justification seemed to be on the net the easiest thing to be aware of. I say to you, I definitely get annoyed while people consider worries that they just do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side effect , people could take a signal. Will likely be back to get more. Thanks
    cheap oakley shorts

  3. I enjoy you because of all of the work on this web site. My aunt take interest in conducting investigation and it’s easy to understand why. Many of us learn all about the compelling mode you present advantageous thoughts by means of the web blog and therefore strongly encourage participation from visitors about this situation while my child has always been discovering so much. Have fun with the rest of the new year. You have been conducting a pretty cool job.
    cheap oakley crosshair sunglasses

  4. I would like to get across my affection for your generosity for men who really need help on in this field. Your special commitment to getting the message around appears to be exceedingly advantageous and has surely permitted guys like me to achieve their desired goals. Your entire interesting useful information implies a whole lot to me and additionally to my office colleagues. Thanks a ton; from all of us.
    cheap oakley m frame sweep

  5. My wife and i ended up being really more than happy when Chris managed to finish up his homework via the ideas he came across in your weblog. It is now and again perplexing to simply possibly be offering tips and hints which usually others have been selling. We really fully grasp we need the writer to give thanks to because of that. These explanations you’ve made, the straightforward web site navigation, the relationships you can assist to foster – it is all superb, and it’s leading our son in addition to us believe that the situation is satisfying, which is certainly particularly serious. Many thanks for the whole thing!
    cheap radar oakley

  6. I definitely wanted to send a word so as to express gratitude to you for some of the stunning tips you are placing at this site. My particularly long internet lookup has at the end been paid with brilliant points to exchange with my friends. I would assume that most of us site visitors are undeniably blessed to be in a very good site with so many awesome individuals with beneficial tips. I feel very much happy to have used the website and look forward to some more amazing minutes reading here. Thank you again for all the details.
    cheap oakley crowbars

  7. I¡¦ve been exploring for a little bit for any high-quality articles or weblog posts in this kind of space . Exploring in Yahoo I finally stumbled upon this web site. Reading this info So i am satisfied to exhibit that I have an incredibly good uncanny feeling I came upon exactly what I needed. I such a lot for sure will make certain to do not put out of your mind this site and give it a look regularly.
    cheap oakley boots

  8. I and my guys were actually viewing the good techniques on your web page while at once developed a terrible suspicion I never expressed respect to the web blog owner for those secrets. All of the ladies are actually glad to study all of them and now have absolutely been taking pleasure in these things. Thanks for simply being quite helpful and also for making a choice on varieties of marvelous issues most people are really eager to know about. My sincere apologies for not expressing gratitude to you sooner.
    cheap oakley kids sunglasses

  9. I have been surfing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. Personally, if all webmasters and bloggers made good content as you did, the web will be a lot more useful than ever before.
    cheap oakley warden

  10. My wife and i were so more than happy Chris managed to carry out his homework by way of the precious recommendations he gained through your web pages. It is now and again perplexing to just always be handing out things which some other people could have been selling. And now we consider we have the writer to be grateful to for that. All of the illustrations you made, the simple website navigation, the friendships you assist to foster – it’s got mostly overwhelming, and it’s really aiding our son in addition to the family imagine that that theme is pleasurable, and that is particularly pressing. Thank you for the whole lot!
    cheap oakley wallets

  11. You actually make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and extremely broad for me. I am looking forward for your next post, I will try to get the hang of it!
    cheap oakley goggles

  12. I wish to show my love for your generosity giving support to folks who actually need assistance with in this situation. Your very own commitment to getting the solution around had been exceedingly helpful and has continuously encouraged people like me to reach their ambitions. The valuable publication indicates a whole lot a person like me and still more to my peers. Warm regards; from each one of us.
    cheap oakley t shirts

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Time limit is exhausted. Please reload the CAPTCHA.