Friday, October 21, 2016

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.
Tags:
Unknown

Stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave.

Related Articles

0 comments:

Post a Comment

Powered by Blogger.