Membuat Animasi Awan Berjalan Dengan CSS

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>&nbsp;&nbsp;<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.

DEMO | Download Script

Sekian tutorial kali ini, semoga menambah imajinasi anda untuk membuat animasi dengan css, semoga berguna.
Salam Web Design Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

10 thoughts on “Membuat Animasi Awan Berjalan Dengan CSS

  1. Bagus dan mudah dimengerti tutorialnya mas :)
    Untuk contoh lain animasi awan dengan lebar container 100%, bisa dilihat disini: http://mommeworld.com/festival/

  2. problemnih says:

    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

  3. saiful says:

    Gan asyik sih css 3, cuman awannya jalannya kok putus2, biar smooth gitu gimana thanks bantuannya

  4. zaenur says:

    ijin sedot gan ,bagus nih :D

  5. zaenur says:

    eemm master tolong upload dong …… gimana supaya gambar kalo kita deketin kursornya bergoyang seperti wayang yang di bawah master ….terimakasih :D

  6. Deni says:

    Gan, ini cara nurunin height langit nya gimana ya ??

  7. bakti says:

    gan.. kalau kita mau naruh tex/box diatas animasi gitu bisa ga ya? bikin transparent box yang ada tulisannya gitu.. thx

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development