25 Desember 2011

Cara Membuat Animasi Hujan Karakter di Web/Blog

Pada Postingan terdahulu saya pernah membahas bagaimana cara mebuat efek tulisan matrix kali ini kita juga akan belajar bagaimana cara membuatnya, tapi kita tidak akan membuatnya di dekstop lagi. kita akan membuatnya di halaman web/blog kita, nah..berikut codingnya

<html>
<head>
<title>Fauzi Topan Ganteng</title>
<!--
HujanKarakter ver 0.1
Fauzi Topan
-->
<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>

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Animasi Hujan Karakter di Web/Blog

12 Komentar:

  1. kurang jelas boss penjelasannya tolong diperjelas lagi..thx

    BalasHapus
  2. itu bikinnya di notepad bro, copykan scriptya ke sana, kemudian simpan dengan eksistensi .html, hasilnya liat di browser

    BalasHapus
  3. mengunjungi blok yang bagus dan penuh dengan informasi yang memnarik tentang cara membuat animasi hujan karakter di web/blog adalah merupakan kebahagiaan tersendiri....teruslah berbagi informasi

    BalasHapus
  4. apakan blok ku ke blokir le

    BalasHapus
  5. info yg sangat bagus n bermanfaat bagi blog saya,,, saya harap agan mau berkunjung balik ke www.ankurniawan.blogspot.com dan sedikit memberikan komentar TERIMA KASIH

    BalasHapus
  6. kok gk ada penjelasanya

    BalasHapus
  7. Terimakasih atas informasinya
    Sangat berguna bagi saya ...

    BalasHapus

Terimakasih telah meninggalkan Komentar di Didit Blog | Silahkan berkomentar dengan bebas, tidak mengandung SARA | komentar dengan link HIDUP akan dihapus | Terimakasih ^_^