Hi, guest | Welcome to Blog Serba Guna | Register | Sign in
Advertise | Contact | About | Live Music | Donation | Sitemap

Minggu, 25 Maret 2012

. Minggu, 25 Maret 2012

 Assalamualaikum wr. wb

Melanjutkan saya belajar jquery, saya coba buat animasi..
berikut ini animasi hujan karakter.
Ada disini kang :
http://fauzi.net84.net/js/hujanKarakter.html

SOURCE CODE
----------------------------------------------------------------------------------------------------------------------

Code:
<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 this Article now on :
ARTIKEL YANG BERHUBUNGAN :


0 komentar:

:X ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar