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">
// <![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> 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
Selamat mencoba.
Sumber code: http://www.mf2fm.com/rv/dhtmlmountains.php
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> 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
Selamat mencoba.
Sumber code: http://www.mf2fm.com/rv/dhtmlmountains.php
0 Response to "Membuat efek gunung berjalan pada blog"
Post a Comment
PERHATIAN !...
*. Baca dulu artikel dan komentar yang ada sebelum Anda menulis komentar
*. Harap berkomentar dengan bijak dan sopan
*. Jika mengajukan pertanyaan, beri centang pada kotak disamping tulisan "Beri tahu saya" untuk mendapatkan jawaban melalui email
*. Dilarang menyertakan "LINK HIDUP", "IKLAN" "SPAM" dalam komentar karena akan dihapus atau dimasukkan ke dalam Comment Spam