Mempercantik header dengan efek awan bergerak / berjalan cukup menarik untuk diterapkan di website yang sedang dikerjakan.
Membuatnya pun cukup mudah, hasilnya pun akan memberikan nilai plus untuk website kita, karena ini termasuk elemen yang bisa membuat orang betah berlama-lama di website anda sambil menikmati animasi tersebut (UX).
Untuk membuatnya kita sebenarnya hanya membutuhkan keterampilan menggunakan css, karena diperlukan sedikit pengetahuan tentang beberapa fungsi yang ada di css3, seperti box-shadow, animation, transform, border-radius.
Penerapannya bisa dimana saja, namun biasanya di header karena awan letaknya diatas, banyaknya awan bisa disesuaikan dengan kebutuhan website dan dibuat menyatu dengan website yang ada, bentuk awan pun bisa disesuaikan dengan kebutuhan
Start with HTML
Oke kita mulai saja dengan membuat sebuah file index.html dan tuliskan script html berikut ini.
<div id="langit">
<div class="awan no1"></div>
<div class="awan no2"></div>
<div class="awan no3"></div>
<div class="awan no4"></div>
<div class="awan no5"></div>
<div class="bulan"></div>
<h1>Tutorial Web Design Indonesia <small> <a href="http://www.tutorial-webdesign.com">http://www.tutorial-webdesign.com</a></small></h1>
</div>
<div class="main">
<p>Tutorial-webdesign.com adalah Website untuk Web Designer & Web Developer Indonesia, Serta Graphic Designer Indonesia. </p>
<p>Website ini berisi tutorial, tips & trik, artikel, inspirasi dan resources yang berkaitan dengan dunia desain.</p>
<p>Semua orang bisa berpartisipasi menjadi penulis di sini</p>
<br>
<p><a href="http://www.tutorial-webdesign.com/membuat-animasi-awan-berjalan-dengan-css-css3">Back to tutorial</a></p>
</div>
Disitu terlihat kalau kita membuat membuat ID #langit yang akan digunakan sebagai area mondar-mandir si awan, dan CLASS .main untuk konten website. ID #langit akan berisi 5 awan yang masing-masing diberi class dengan nomor nya.
Untuk bentuk layout bisa disesuaikan dengan keinginan dan kebutuhan anda.
Styling with CSS
Selanjutnya kita akan percantik dengan css agar semua bisa berfungsi sesuai yang diharapkan.
CSS untuk Langit
#langit{
background: #000;
}
CSS untuk Bentuk dan Posisi Bulan
.bulan{
position: fixed;
width: 15px;
height: 15px;
background: orange;
left: 70px;
top: 50px;
background: yellow;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
opacity: .1;
border-radius: 50%;
-webkit-animation: bercahaya 1s linear infinite;
-moz-animation: bercahaya 3s linear infinite;
-ms-animation: bercahaya 1s linear infinite;
-o-animation: bercahaya 1s linear infinite;
animation: bercahaya 3s linear infinite;
}
CSS untuk Bentuk Awan
.awan{
width: 200px;
height: 60px;
background:#555;
border-radius: 200px;
position: relative;
z-index: 9999;
}
.awan:before,
.awan:after{
content: ' ';
position: absolute;
background: #555;
width: 100px;
height: 80px;
position: absolute;
top: -15px;
left: 10px;
border-radius:100px;
text-transform: rotate(30deg);
}
.awan:after{
width: 120px;
height: 120px;
top: -55px;
left: auto;
right: 15px;
}
CSS Untuk Besar & Pengaturan Masing-masing (5 Awan)
Karena kita akan coba membuat lima buat awan yang akan bergerak terus menerus maka kita perlu atur setiap class yang diberi nama berurutan (.no1, no2, .no3, .no4, .no5)
.no1{
-webkit-animation: jalankanawan 15s linear infinite;
-moz-animation: jalankanawan 15s linear infinite;
-ms-animation: jalankanawan 15s linear infinite;
-o-animation: jalankanawan 15s linear infinite;
animation: jalankanawan 15s linear infinite;
}
.no2{
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-o-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
-webkit-animation: jalankanawan 25s linear infinite;
-moz-animation: jalankanawan 25s linear infinite;
-ms-animation: jalankanawan 25s linear infinite;
-o-animation: jalankanawan 25s linear infinite;
animation: jalankanawan 25s linear infinite;
}
.no3{
left: -250px;
top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-animation: jalankanawan 20s linear infinite;
-moz-animation: jalankanawan 20s linear infinite;
-ms-animation: jalankanawan 20s linear infinite;
-o-animation: jalankanawan 20s linear infinite;
animation: jalankanawan 20s linear infinite;
}
.no4{
left: 470px;
top: -250;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
opacity: 0.75;
-webkit-animation: jalankanawan 18s linear infinite;
-moz-animation: jalankanawan 18s linear infinite;
-ms-animation: jalankanawan 18s linear infinite;
-o-animation: jalankanawan 18s linear infinite;
animation: jalankanawan 18s linear infinite;
}
.no5{
left: -150px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-animation: jalankanawan 20s linear infinite;
-moz-animation: jalankanawan 20s linear infinite;
-ms-animation: jalankanawan 20s linear infinite;
-o-animation: jalankanawan 20s linear infinite;
animation: jalankanawan 20s linear infinite;
}
Animasi
Selanjutnya kita akan buat objek-objek yang ada di awan untuk bergerak sesuai waktu dan bentuk pergerakan yang diinginkan, disini kita akan membuat awan bergerak dari kiri ke kanan, dengan kecepatan masing-masing yang berbeda.
Animasi Cahaya Bulan
@-moz-keyframes bercahaya{
0% {
opacity: .6;
box-shadow:3px 3px 35px 35px orange
}
100%{
opacity: .7;
box-shadow:3px 3px 40px 40px orange
}
}
Animasi Pergerakan Awan
@-webkit-keyframes jalankanawan{
0% { margin-left: 1280px;}
100%{margin-left: -1280px;}
}
@-moz-keyframes jalankanawan{
0% { margin-left: 1280px;}
100%{margin-left: -1280px;}
}
@-o-keyframes jalankanawan{
0% { margin-left: 1280px;}
100%{margin-left: -1280px;}
}
Hasil
Maka hasilnya bisa dilihat awan bergerak dari kiri ke kanan dan ada bulan yang bercahaya.
Sekian tutorial kali ini, semoga menambah imajinasi anda untuk membuat animasi dengan css, semoga berguna.
Salam Web Design Indonesia
hmm , mmg bgus, tapi mkan banyak memory. https://www.box.com/s/y3k2vzgymzawfspg2mep
Bagus dan mudah dimengerti tutorialnya mas :)
Untuk contoh lain animasi awan dengan lebar container 100%, bisa dilihat disini: http://mommeworld.com/festival/
hi
mungkin ga nyambung
tapi bagaimana menyimpan css3 per post pada wp?
sehingga tiap post bisa berganti ganti animasi gambarnya.
kalau taruh di berarti banyak banget file css yang terbaca
ada solusi?
atau boleh jawab di blog saya
http://9allery.info berkunjung deh
Gan asyik sih css 3, cuman awannya jalannya kok putus2, biar smooth gitu gimana thanks bantuannya
Disini smooth kok, mungkin komputer anda kurang bagus graphic nya
ijin sedot gan ,bagus nih :D
eemm master tolong upload dong …… gimana supaya gambar kalo kita deketin kursornya bergoyang seperti wayang yang di bawah master ….terimakasih :D
Gan, ini cara nurunin height langit nya gimana ya ??
gan.. kalau kita mau naruh tex/box diatas animasi gitu bisa ga ya? bikin transparent box yang ada tulisannya gitu.. thx
bisa
itu harus tambah div gitu?
selama ini saya biasa pake grid system bootstrap, jadi kurang tau kalau ga ada container nya..
http://www.adhityatama.com/
mohon pencerahannya..
[…] http://www.tutorial-webdesign.com/membuat-animasi-awan-berjalan-dengan-css-css3/ […]