Sunday, 10 March 2013

பிளாக்கரில் ஒரு சூப்பர் மேஜிக்..!! - (sparkles effect)

 
அன்பு நண்பர்களே..!!! வணக்கம்.. தொழில்நுட்ப பதிவெழுதி நாட்கள் பல ஆகிவிட்டது. எனவேதான் ஒரு தொழில்நுட்ப பதிவு

இதில் ஒன்றும் பிரமாதம் இல்லை.. தொழில் நுட்பம் என்பது இன்று அனைவருக்கும் பயன்படும்விதமாக மிக மிக எளிமைப்படுத்தப்பட்டிருக்கிறது.

நட்சத்திர மேஜிக்கில் நமது தங்கம்பழனி வலைப்பூ..!

ஒரு சில வலைப்பூக்களில் பார்த்திருப்பீர்கள்.. நட்சத்திரக் குறிகள்.. கூட்டல் வடிவ குறிகள் 'பொலபொல'வென்று கொட்டும். நமது தங்கம்பழனியில் கூட இந்த எஃபக்ட்(Effect) செயல்படுத்தப்பட்டுள்ளது. இந்த எஃபக்ட் ஆனது பார்ப்பதற்கு அழகாகவும், நமது வாசகர்களை கவரும் விதத்திலும் அமைந்திருக்கும். சரி. நமது வலைப்பூவில் இது போல கொண்டு வர முடியாதா?

ஒரு சில வேளைகளில் உங்களுக்கு இப்படி ஒரு எண்ணம் வந்திருக்கும். அந்த எண்ணத்தை இப்போது நிறைவேற்றிக்கொள்ளுங்கள்.

கோடிங்கை மாற்றம் செய்வதற்கு முன்பு செய்ய வேண்டியவை.

இந்த எஃபக்டை உருவாக்க உங்கள் பிளாக்கர் கணக்கில் முதலில் நுழைந்துகொள்ளுங்கள்..

  • பிறகு Dashboard==>Desing==>Edit Html செல்லவும்..
  • வலைப்பூவில் எந்த ஒரு மாற்றத்தை ஏற்படுத்தும் முன்பு Download Full Template என்பதை ஒரு முறை கிளிக் செய்து பேக்அப் எடுத்துக்கொள்ளுங்கள்.
  • பிறகு Expand Widget template என்பதில் டிக் மார்க் ஏற்படுத்திக்கொண்டு கீழ்காணும் கோடிங்கை தேடவும்...
  • <head>
  • அதன்பிறகு,கீழே இருக்கும் ஜாவா ஸ்கிரிப்ட்டை காப்பி செய்து <head> என்பதற்கு கீழே பேஸ்ட் செய்துகொள்ளுங்கள்
அதன் பிறகு கீழே இருக்கும்  Save template என்பதை கிளிக் செய்துகொள்ளவும்.. அவ்வளவுதான். 


<script type="text/javascript">
// <![CDATA[
var colour="red";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

உங்கள் வலைப்பூவை புதிதாக ஒரு விண்டோவில் திறந்து பார்க்கவும்.. உங்கள் வலைப்பூவில் நீங்கள் மௌசை அசைக்கும் ஒவ்வொரு முறையும் - (கர்சர் ஒவ்வொரு முறையும் நகரும்போது) ஒரு மேஜிக் நடந்து கொண்டிருக்கும். கர்சர் போகும் பக்கமெல்லாம் ப்ளஸ் குறிகள் உதிர்ந்து கொண்டே இருக்கும்.. என்ன நண்பர்களே.. இந்த பதிவு பிடித்திருக்கிறதா? இது ஒன்றும் பெரிய விசயமே இல்லை.. நீங்கள் செய்து பாருங்கள்.. உங்கள் வலைப்பூவில் இதுபோல ப்ளஸ் குறிகள் கர்சர் நகரும்போது  தோன்றி கீழே உதிர்ந்துகொண்டே மறைந்துபோகும்..கர்சர் அசையும்போதெல்லாம் இவ்வாறு நிகழ்ந்துகொண்டே இருக்கும்.. !!!

இறுதியில் நீங்களே உங்களை மெய்மறந்து சொல்லுவீர்கள்..வாவ்.. 'சூப்பர் எஃபக்ட்!!'  என்று.

குறிப்பு: இந்த கோடிங்கில் சிவப்பு நிற நட்சத்திர கூட்டல் குறிகள் வந்துகொண்டிருக்கும் வகையில் அமைக்கப்பட்டிருக்கிறது.. இதில் மற்ற நிறங்களையும் கொண்டு வரலாம்.. சிவப்பு நிறத்தில் உள்ள red என்பதற்கு உங்களுக்கு விருப்பப்பட்ட நிறத்தையும் கொடுக்கலாம்.


வாசக நண்பர் ஒருவர் கேட்டதிற்கிணங்க இப்பதிவு எழுதப்பட்டது. உங்களுக்கு ஏதேனும் இப்படிப்பட்ட ஏதேனும் சந்தேகம் இருந்தாலும் என்னை தொடர்பு கொள்ளலாம்..  புதிய பிளாக்கர் ஹெல்ப் பகுதியையும் ஒரு முறை வாசித்துவிடுங்களேன்..!!!



புதிய பதிவுகளை இலவசமாக மின்னஞ்சலில் பெற..!

No comments:

Post a Comment

ஆன்லைன் வயது கால்குலேட்டர்


Udanz