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>
kurang jelas boss penjelasannya tolong diperjelas lagi..thx
BalasHapusitu bikinnya di notepad bro, copykan scriptya ke sana, kemudian simpan dengan eksistensi .html, hasilnya liat di browser
BalasHapusmengunjungi 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
BalasHapusapakan blok ku ke blokir le
BalasHapusgue kurang ngerti bos
BalasHapusinfo 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
BalasHapuskok gk ada penjelasanya
BalasHapusTerimakasih atas informasinya
BalasHapusSangat berguna bagi saya ...
kerrrren...
BalasHapusTerimakasih atas informasinya
BalasHapustank's gan
BalasHapus