Heartless Background

Tuesday, 24 July 2012

Cara Membuat Efek Hujan Deras Di Blog


Cara Membuat Efek Hujan Deras Di Blog

    Nah untuk postingan yang sekarang ini saya akan share cara membuat efek hujan di blog. Ok langsung aja kita mulai bagaimana cara membuat animasi / efek hujan di blog.

Membuat Efek Hujan

Berikut langkah bikin efek/animasi hujan deras pada blog :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget
4. HTML/Javascript
5. Copy kode berikut ke dalam HTML/Javascript

<html>
<head>
<title>Blog Rudy Hartono</title>
<!--
HujanKarakter ver 0.1
Rudy Hartono
-->
<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>
</head>

<body>
<div id="area">

</div>
</body>
</html>
6. Selesai dan simpan

Sekian dulu uraian yang begitu singkat tentang cara membuat / memasang efek hujan deras pada blog, semoga bermanfaat dan happy blogging.

No comments :

Post a comment