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
http://adf.ly/5ANzo
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>
<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>
*Sekarang saya baru punya logika seperti itu, mungkin ada yg bisa memberi masukkan ?
Courtesy Of Fauzi Topan
0 Response to "Animasi Hujan Karakter"
Post a Comment