Untuk melihat contoh penerapan code ini silahkan lihat disini.
Nah jika anda berminat untuk menerapkan code ini berikut caranya:
1. Login ke Blogger.com
2. Klik blog yang akan diberikan efek animasi ini
3. Klik Template --> Edit HTML --> Lanjutkan --> Centang Expand Template Widget
4. Jangan lupa backup template dulu
5. Cari code </head> (gunakan CTRL+F untuk memudahkan pencarian)
6. Jika sudah ketemu copy code berikut dan paste di atas code tadi
<script type="text/javascript">7. Selesai, simpan template anda dan lihat hasilnya.
// <![CDATA[
var delay=5; // seconds until scramble takes place once page loaded
var colour="#f00"; // colour which letters are highlighted when being swapped
/***************************\
* Web-Page Scrambler *
*(c)2005-12 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var elems=new Array();
var chars=new Array();
var elmax=chmax=0;
var nexco="transparent";
function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addLoadEvent(scramble);
function scramble() { if (document.getElementById) {
var i, j, txt, parent, span, words;
getAllText(document.body);
for (i=0; i<elmax; i++) {
txt=elems[i].nodeValue;
parent=elems[i].parentNode;
words=elems[i].nodeValue.split(" ");
for (j=0; j<words.length; j++) {
if (words[j].match(/^\w{2,}$/)) {
span=document.createElement("span");
span.appendChild(document.createTextNode(words[j]));
parent.insertBefore(span, elems[i]);
chars[chmax++]=span;
}
else parent.insertBefore(document.createTextNode(words[j]), elems[i]);
if (j!=words.length-1) parent.insertBefore(document.createTextNode(" "), elems[i]);
}
parent.removeChild(elems[i]);
}
setTimeout("scrumble()", delay*1000);
}}
function scrumble() {
var i, l1, r, l2;
for (i=0; i<chmax; i++) {
l1=chars[i].firstChild.nodeValue.length;
do {
r=i+Math.floor(Math.random()*(chmax-i));
l2=chars[r].firstChild.nodeValue.length;
}
while (i<chmax-256 && l1!=l2);
setTimeout("swap("+i+", "+r+")", 40*i);
}
}
function swap(i, j) {
var k=chars[i].firstChild.nodeValue;
var l=chars[j].firstChild.nodeValue;
if (i) chars[i].style.backgroundColor=nexco;
if (i!=chmax-1) {
nexco=chars[i+1].style.backgroundColor;
chars[i+1].style.backgroundColor=colour;
}
chars[i].firstChild.nodeValue=l;
chars[j].firstChild.nodeValue=k;
}
function getAllText(el) {
if (el.nodeType==3 && !el.nodeValue.match(/^\s*$/)) elems[elmax++]=el;
if (el.childNodes.length) for (var i=0; i<el.childNodes.length; i++) getAllText(el.childNodes[i]);
}
// ]]>
</script>
Selamat mencoba!!!...
Sumber Code: http://www.mf2fm.com/rv/dhtmlscramble.php
0 comments:
Posting Komentar