Cara Membuat Efek Hujan Deras Di Blog | Pada postingan sebelumnya saya pernah bahas tentang beberapa macam efek di blog diantaranya Membuat Animasi Naruto vs Sasuke di Blog dan juga Cara Membuat Efek Meteor Jatuh Ke Bumi Blog. Nah untuk postingan yang sekarang ini saya akan share cara membuat efek hujan di blog. Ok langsung aja kita mulai bagaimana cara membuat dan memasang animasi / efek hujan di blog.
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.
0 komentar:
Posting Komentar