Monday, 12 December 2011

Membuat Efek Background Hujan Salju HTML

Bagi anda yang ingin mempercantik website atau blog, saya punya tips dengan menambahkan efek hujan salju yang cantik. Selain itu, warna dan ukurannya dapat diatur sesuai selera. Efek ini bisa berjalan sebagai background, sehingga anda tak perlu khawatir tulisannya tidak muncul atau turun tak karuan :D Oke langsung saja copy kan script berikut ke html anda


<script>
// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=30

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#FF0000","#0000FF","#00FF00","#CC00FF")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.5

// Set the maximal-size of your snowflaxes
var snowmaxsize=27

// Set the minimal-size of your snowflaxes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing 
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent 
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie5||ns6||opera

function randommaker(range) {  
 rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
 if (ie5 || opera) {
  marginbottom = document.body.clientHeight
  marginright = document.body.clientWidth
 }
 else if (ns6) {
  marginbottom = window.innerHeight
  marginright = window.innerWidth
 }
 var snowsizerange=snowmaxsize-snowminsize
 for (i=0;i<=snowmax;i++) {
  crds[i] = 0;                      
     lftrght[i] = Math.random()*15;         
     x_mv[i] = 0.03 + Math.random()/10;
  snow[i]=document.getElementById("s"+i)
  snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
  snow[i].size=randommaker(snowsizerange)+snowminsize
  snow[i].style.fontSize=snow[i].size
  snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
  snow[i].sink=sinkspeed*snow[i].size/5
  if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
  if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
  if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
  if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
  snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
  snow[i].style.left=snow[i].posx
  snow[i].style.top=snow[i].posy
 }
 movesnow()
}

function movesnow() {
 for (i=0;i<=snowmax;i++) {
  crds[i] += x_mv[i];
  snow[i].posy+=snow[i].sink
  snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
  snow[i].style.top=snow[i].posy
  
  if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
   if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
   if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
   if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
   if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
   snow[i].posy=0
  }
 }
 var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
 document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
 window.onload=initsnow
}
</script>

 
Selamat Mencoba ^^ 

0 comments:

Post a Comment

Share it

Advertisements

Dukungan berupa donasi dari Anda akan sangat berarti bagi eksistensi dan pengembangan blog ini
Anda dapat memberikannya dengan mengklik iklan banner di samping atau di bawah ini

adf.ly - shorten links and earn money!
2012 2014 3 ACDC add on afilasi age of empires; stronghold; yugioh; nyamuk; xilisoft; video converter; software; game air dingin alejandro alex noerdin alex sumsel Allanis Morisette anak anjing android aneh Animasi anjing antichrist Antivirus aplikasi astronomi avatar ayodance background badai badai matahari bahasa pemrogaman band bangun battlenet bayi BB bbm beladiri belajar beras berita berpikir bijak bijaksana biji bintang bisnis online bitcoin blackberry blogger Blur bodoh bohong bos bos beras browser C# C++ cambridge capoeira cara cara kerja otak catur CBS cerita cerita; lucu; joko; conditoner cerita; tips; pekerjaan; impian; bu haji; pemuda; motivasi; renungan cewek cheat china chinese paladin coba-coba coldplay concert crack curhat deep freeze dialog diam ditutup dns changer doa dog dota download drama duid dunia ebay ebook efek emulator eng-article Eric Clapton facebook fast food FBI film flu full version funny G3 gambling Game gempa gender gigitan gogamers GOGS gproxy gratis GUI gumiho Guns N Roses hack hacker hacking hadir hahaha handphone hang hari ibu Harry Potter heboh hewan hoki hp html hu ge hujan salju humor hunan tv ibu idm IELTS ielts preparation ikan ilegal imaginasi indah industri info internet ios iphone iseng jahil jantung java jelek jenis jenis makanan John Mayer joke jre jss jsstripler judi jujur justbeenpaid kalkulator karakter karyawati katak kehidupan kemampuan otak kepiting kepribadian kertas kesalahan ketawa kiamat Kim Dotcom kisah kodok komputer korea kriminal kucing Lady Gaga lagu laut lelaki lelang lele lesbian liberty reserve liu shi shi LR luas lucu lugu makan makanan malang malware man and woman manusia mata mata uang matahari matematika math megaupload melotot menarik mengatur menghitung menu motivasi mujur musik NBC negara Neobux news ninja saga nonton o2jam OASIS offline opengamers opera OPGS opmin OST palembang pekerjaan; impian; menyenangkan; tips; pelajaran hidup pempek pencuri pengalaman pengganti penyakit perbedaan pria dan wanita perempuan pesan moral phk phone photoshop; cs6; notepad; game; software; fifa; adobe; flash builder; ms office; angry birds; craagle; keygen; serial; dota 2; avast; antivirus; cheat; starcraft II; starcraft 2; converter; program phyton pike plan Point Blank pria profit profitclicking program programming psikologi ptc; iconbux; scam; waspada; pay to click ptc; scam; pay to click pulau pulau hoga Radiohead rahasia raja rambutan real story refreshing rencana renungan revolusi revolusi industri Rihanna romansa sakit sakit jantung satu kata scam scar of sky script sehat sejarah serakah serangan server dota shoutmix situs snsd software solusi song sosialitas sumpit sumsel superstar susah tidur symbian tahun baru Taylor Swift Teknologi tersedak test three tips tips; jaringan; berita; penyakit; sakit; kanker tomcat transaksi true story tugas Tuhan tukang cukur tune up tutorial tv tvuplayer U2 uang ucweb unik vampire van halen video volume wanita warcraft III website Weezer wi-fi win xp windows windows xp wisata x-plore xuan yuan sword youtube zynga poker