Hai sobat bertemu lagi dengan saya ! Pada kesempatan kali ini saya akan memposting cara menambahkan efek hujan pada blog, Caranya gampang kok tinggal ikuti cara di bawah ini selesai deh. Tanpa berlama lama lagi langsung saja kita menuju ke TKP.
Langkah - langkahnya dibawah ini :
2. Masukan Script Berikut
<html>
<head>
Bang Zendy
<!--
HujanKarakter ver 0.1
Bang Zendy Ganteng
-->
<style type="text/css">
*{
font-size:12px;
font-family: Tahoma, Verdana, Arial;
}
body{
background:#000;
overflow:hidden;
color:#0f4;
padding:8px;
}
#area{
border:0;
padding:0;
width:100%;
height:100%;
}
.char{
position:absolute;
top:-50px;
text-shadow:0 -100px 10px #0a0;
opacity:.5;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
minCharCode = 33;
maxCharCode = 126;
minSpeed = 900;
maxSpeed = 5000;
counter = 0;
maxChar = 400;
$(document).ready(function(){
for(i=0;i<99;i++){
buatKarakter();
}
});
function buatKarakter(){
var charID = String.fromCharCode(rand(minCharCode, maxCharCode));
var pos = rand(0,$(document).width());
var newChar = '<div class="char char' + counter + '" style="left:'+ pos + 'px;">' + charID + '</div>';
$('#area').append(newChar)
animKarakter(counter);
counter++;
}
function animKarakter(c){
var transparent = rand(10,99);
var fontsize = rand(9,12);
var speed = rand(minSpeed, maxSpeed);
var pos = rand(0,$(document).width());
$('.char'+c).animate({
top:$(document).height(),
}, speed, function(){
$('.char'+c).css('top', '-50px');
$('.char'+c).css('left', pos+'px');
$('.char'+c).css('opacity', '.'+transparent);
$('.char'+c).css('fontSize', fontsize);
animKarakter(c);
});
}
function rand(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
</script>
<div id="area">
</div>
3. Simpan Template
Semoga bermanfaat dan selamat mencoba.
sekian dulu postingan saya kali ini tentang cara membuat efek hujan pada blog.
terima kasih..
Ditulis Oleh : Rizky
Sobat sedang membaca artikel tentang Cara Membuat Efek Hujan Di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini. Silakan di rubah dan sesuwekan sesuka selera sobat
Tidak ada komentar:
Posting Komentar