Membuat animasi Matrix dengan CSS3

22/10/11Comments 3animation / css3 / design / tutorial

efek matrix dengan css3Pernah nonton film The Matrix? saya sih pernah tapi gak pernah sampe full, selalu ketiduran :D

Dalam film tersebut kita bisa lihat ada effect kata-kata atau tulisan berjatuhan dengan warna hijau dan latar belakang warna hitam (kalo ga salah sih itu juga) :D .

Disini kita coba buat animasi seperti itu dengan teknik CSS3, sayangnya teknik seperti ini baru bisa dilihat pada browser berbasis webkit (google chrome, safari), untuk firefox dan apalagi IE tunggu aja sampe ada teknologi baru lagi :D

Oke langsung aja kita ke coding, berikut ini untuk CSS nya, simpan antara <head> dan </head>:

<style type="text/css" media="screen">
body{
 font-family: Helvetica, Verdana, sans-serif;
}
#matrix{
 margin: 1em auto;
 width: 450px;
 height: 288px;
 overflow: hidden;
 background: #000;
 background-image: -webkit-gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
 color: rgba(0, 255, 0, .7);
 text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
 position: relative;   
}
@-webkit-keyframes fade{
 0%   { opacity: 1; }
 100% { opacity: 0; }
}
@-webkit-keyframes fall{
 from {top: -250px;}
 to     {top: 300px;}
}

#matrix div{
 position: absolute;   
 top: 0;
 /* arrearance */
 -webkit-transform-origin: 0%;
 -webkit-transform: rotate(90deg); 

 /* animation */
 -webkit-animation-name: fall, fade;           
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: normal;
 -webkit-animation-timing-function: ease-out;
}
#matrix span{
 color: rgb(0, 255, 0);
 text-shadow: rgb(255, 255, 255) 0px 0px 5px;
}
.f1{
 font-size: 1.2em;
}
.f2{
 font-size: .9em;
}
.c1{
 color: rgba(0, 255, 0, .5);
}
.d1{
 -webkit-animation-duration: 4s;
}
.d2{
 -webkit-animation-duration: 6s;
}
.d3{
 -webkit-animation-duration: 8s;
}
.d4{
 -webkit-animation-duration: 10s;
}
.de{   
 -webkit-animation-delay: 3s;
}
</style>

dan ini untuk html nya, simpan di antara <body>  dan </body>:

<h1 align="center">Animasi "Matrix" dengan CSS3</h1>
<div id="matrix">   
 <div style="left:5px;">q8w<span>1</span>ertyuioklsdfgh<span>j</span>zxc</div>
 <div style="left:30px;">hgd4ldhbc9kpugccsr<span>q</span></div>
 <div style="left:60px;">tr<span>z</span>ews0yfkldf4cvgbhj<span>n</span></div>
 <div style="left:80px;">sodhr49wh<span>u</span>yfbsrnlepjh</div>
 <div style="left:110px;">fue73<span>s</span>jf0tbkxpowf<span>v</span>n</div>
 <div style="left:140px;">sjdhfgueiwfgivecjowxkwpkpo<span>m</span>vcjoeuur</div>
 <div style="left:170px;">tr<span>z</span>hfggh</div>
 <div style="left:185px;">thgp<span>m</span>srthdvytfv09876t<span>q</span>fgv</div>
 <div style="left:200px;">dhiwgfdue<span>s</span>rjm</div>
 <div style="left:250px;">osadh<span>a</span>rshdyfeujm</div>
 <div style="left:290px;">fwedjsdjh<span>l</span>gmrghftdercwewergjm</div>
 <div style="left:310px;">sodhr49wh<span>a</span>yfbsrnlepjh</div>
 <div style="left:350px;">p00oi<span>0</span>nf5sujhgdgbrjs36gdr<span>g</span>jpo</div>
 <div style="left:390px;">h68kgdetklbf<span>b</span>eswk</div>
 <div style="left:410px;">dfrttvb<span>s</span>cfsr</div>
 <div style="left:430px;">sgfy<span>b</span>0hfrese<span>4</span>kc</div>
</div>

Untuk preview hasilnya silahkan klik link di bawah ini (jangan lupa preview nya di google chrome atau safari ya):

Demo

OK, semoga tutorial kali ini membantu dan memberi inspirasi bagi Anda semua, kalo sempat komen dulu yah… :D

sandy -

3 Comments
22/10/11 10:39

resti

oke deh tar di coba ^__^

23/10/11 19:01

boxsoffice

I love CSS3, apalagi HTML5,,,, BTW kalau kita pasang itu blog kita berat pa ngk bosss,,,, tp ane coba dulu ya makasih ya bosss infonyaaaa,,,

Berkunjung balik ya Download Film Gratis | High Quality – Boxsoffice

24/10/11 09:54

sandy

@resti : silahkan dicoba :)
@boxsoffice : ga berat kok kalo dipasang di blog, selamat mencoba ya… :)

Leave a Comment