Balik lagi ke masalah urusan blogging yang masih seputar menghias blog,
sebenernya sih kalau bisa dibilang ini karena bingung mau bikin
postingan apa jadinya ya update blog yang ada saja daripada blog
nganggur dan tidak ada updatenya. Membuat efek gunung berjalan ini
merupakan hasil dari berbingung ria mau update apa akan tetapi efek ini
cukup cantik buat menghias sebuah blog dan cocok buat anda yang hobby
dalam menghias blog dan juga efek ini juga tidak begitu membuat loading
blog menjadi berat jadi buat anda yang suka dan hobby menghias blog
tidak ada salahnya jika anda mencoba efek yang lumayan cantik ini.Sebelum membuat dan menerapkan efek ini silahkan lihat dulu hasil dari penerapan codenya supaya nanti tidak menyesal, nah silahkan lihat sendiri disini.
Sudah dilihatkan hasilnya, jika sudah berikut cara memasang codenya:
Letakkan code berikut diantara code <head> and </head> pada template blog anda, bisa juga diletakkan dalam postingan akan tetapi dalam mode HTML jangan pada mode Compose karena code tersebut tidak akan bisa berjalan, ini dia code yang harus anda gunakan:
<script type="text/javascript">Lumayan banyak codenya karena tidak saya ubah menjadi javascript yang lebih ringkas namun code di atas bisa anda modifikasi untuk merubah warna dari gunung maupun bayangannya tinggal kreatifitas anda saja
// <![CDATA[
var colour1="#96c"; // colour of front mountains
var colour2="#ccc"; // colour of distant mountains
var height=200; // maximum height of the mountains in pixels
/***************************\
* Country Mountain Effect *
*(c)2013 on mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var fr_mount=new Array();
var fr_mouny=new Array();
var ba_mount=new Array();
var ba_mouny=new Array();
var swide, sleft, boddie, dx;
var dm=new Array();
function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}
addLoadEvent(country_road);
function country_road() { if (document.getElementById) {
var i, m, b;
boddie=document.createElement("div");
b=boddie.style;
b.position="fixed";
b.bottom="0px";
b.left="0px";
b.overflow="visible";
b.width="1px";
b.height="1px";
b.backgroundColor="transparent";
document.body.appendChild(boddie);
m=height/8+2*Math.floor(Math.random()*height/8);
fr_mouny[0]=m;
fr_mount[0]=createDiv(fr_mouny[0], 2, colour1);
fr_mount[0].style.left="0px";
fr_mount[0].style.bottom="0px";
fr_mount[0].style.zIndex="9999";
boddie.appendChild(fr_mount[0]);
m=height/4+2*Math.floor(Math.random()*height/4);
ba_mouny[0]=m;
ba_mount[0]=createDiv(ba_mouny[0], 2, colour2);
ba_mount[0].style.opacity="0.75";
if (navigator.appName=="Microsoft Internet Explorer") ba_mount[0].style.filter="alpha(opacity=75)";
ba_mount[0].style.left="0px";
ba_mount[0].style.bottom="0px";
ba_mount[0].style.zIndex="9998";
ba_mount[0].style.pointerEvents="none";
boddie.appendChild(ba_mount[0]);
for (i=0; i<4; i++) dm[i]=(Math.random()<.5)?2:-2;
set_width();
set_scroll();
setInterval(take_me_home, 40);
}}
function take_me_home() {
var i, m, x, s;
s=Math.floor(swide/2);
if (dx>0) {
for (i=fr_mouny.length-1; i>2*dx; i--) {
fr_mouny[i]=fr_mouny[i-2*dx];
if (i<=s) fr_mount[i].style.height=fr_mouny[i]+"px";
}
m=fr_mouny[i+1];
for (; i>=0; i--) {
fr_mouny[i]=m+(1+dx*2-i)*dm[0];
if (i<=s) fr_mount[i].style.height=fr_mouny[i]+"px";
}
if ((fr_mouny[0]>height/2 && dm[0]>0) || (fr_mouny[0]<20 && dm[0]<0) || (fr_mouny[0]>20 && fr_mouny[0]<4*height/10 && Math.random()<.05)) dm[0]=-dm[0];
for (i=ba_mouny.length-1; i>dx; i--) {
ba_mouny[i]=ba_mouny[i-dx];
if (i<=s) ba_mount[i].style.height=ba_mouny[i]+"px";
}
m=ba_mouny[i+1];
for (; i>=0; i--) {
ba_mouny[i]=m+(1+dx-i)*dm[2];
if (i<=s) ba_mount[i].style.height=ba_mouny[i]+"px";
}
if ((ba_mouny[0]>height && dm[2]>0) || (ba_mouny[0]<height/4 && dm[2]<0) || (ba_mouny[0]>height/2 && ba_mouny[0]<9*height/10 && Math.random()<.05)) dm[2]=-dm[2];
}
else if (dx<0) {
x=fr_mouny.length+2*dx;
for (i=0; i<x; i++) {
fr_mouny[i]=fr_mouny[i-2*dx];
if (i<=s) fr_mount[i].style.height=fr_mouny[i]+"px";
}
m=fr_mouny[i-1]
for (; i<fr_mouny.length; i++) {
fr_mouny[i]=m+(1+i-x)*dm[1];
if (i<=s) fr_mount[i].style.height=fr_mouny[i]+"px";
}
if ((fr_mouny[i-1]>height/2 && dm[1]>0) || (fr_mouny[i-1]<20 && dm[1]<0) || (fr_mouny[0]>20 && fr_mouny[0]<4*height/10 && Math.random()<.05)) dm[1]=-dm[1];
x=ba_mouny.length+2*dx;
for (i=0; i<x; i++) {
ba_mouny[i]=ba_mouny[i-dx];
if (i<=s) ba_mount[i].style.height=ba_mouny[i]+"px";
}
m=ba_mouny[i-1]
for (; i<ba_mouny.length; i++) {
ba_mouny[i]=m+(1+i-x)*dm[3];
if (i<=s) ba_mount[i].style.height=ba_mouny[i]+"px";
}
if ((ba_mouny[i-1]>height && dm[3]>0) || (ba_mouny[i-1]<height/4 && dm[3]<0) || (ba_mouny[i-1]>height/2 && ba_mouny[i-1]<9*height/10 && Math.random()<.05)) dm[3]=-dm[3];
}
}
function createDiv(height, width, colour) {
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);
}
window.onresize=set_width;
function set_width() {
var i, b, m, l, sw_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
}
if (typeof(self.innerWidth)=='number' && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
}
if (sw_min==999999) {
sw_min=800;
}
if (Math.floor(sw_min/2)>fr_mouny.length) {
l=fr_mouny.length;
m=fr_mouny[l-1];
b=ba_mouny[l-1];
for (i=l; i<=Math.floor(sw_min/2); i++) {
fr_mouny[i]=(m+=dm[1]);
fr_mount[i]=createDiv(fr_mouny[i], 2, colour1);
fr_mount[i].style.left=(2*i)+"px";
fr_mount[i].style.bottom="0px";
fr_mount[i].style.zIndex="9999";
boddie.appendChild(fr_mount[i]);
if ((m>height/2 && dm[1]>0) || (m<20 && dm[1]<0) || (m>20 && m<4*height/10 && Math.random()<.05)) dm[1]=-dm[1];
ba_mouny[i]=(b+=dm[3]);
ba_mount[i]=createDiv(ba_mouny[i], 2, colour2);
ba_mount[i].style.opacity="0.75";
if (navigator.appName=="Microsoft Internet Explorer") ba_mount[i].style.filter="alpha(opacity=75)";
ba_mount[i].style.left=(2*i)+"px";
ba_mount[i].style.bottom="0px";
ba_mount[i].style.zIndex="9998";
ba_mount[i].style.pointerEvents="none";
boddie.appendChild(ba_mount[i]);
if ((b>height && dm[3]>0) || (b<height/4 && dm[3]<0) || (b>height/2 && b<9*height/10 && Math.random()<.05)) dm[3]=-dm[3];
}
}
swide=sw_min;
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=='number') {
sleft=self.pageXOffset;
}
else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
}
else {
sleft=0;
}
}
document.onmousemove=mouse;
function mouse(e) {
var x;
if (e) x=e.pageX;
else {
x=event.x;
set_scroll();
x+=sleft;
}
dx=Math.floor(-1.5+4*(x-sleft)/swide);
}
// ]]>
</script>
Selamat mencoba.
Sumber : http://bl1t4r.blogspot.com/2013/07/membuat-efek-gunung-berjalan-pada-blog.html#ixzz2iExe4iQO
0 komentar:
Posting Komentar