Cara Membuat CSS Animasi Space / Luar Angkasa HTML dan CSS

Cara Membuat CSS Animasi Space / Luar Angkasa HTML dan CSS – Setelah sebelumnya saya membahas tentang css gradient sekarang saya masih ingin membahas tentang css karena bosan dengan Ajax dan database hehe. Karena bagi Front End pengetahuan css ini sangatlah penting guna untuk memanjakan mata pengguna agar tidak bosan dalam menggunakan aplikasi. CSS tidaklah hanya itu-itu saja sekedar warna, width, height atau lainnya. Dengan hanya css kita juga bisa membuat animasi. Animasinya adalah dengan membuat gambar bergerak atau lainnya. Namun pada contoh kali ini saya hanya akan mencontohkan animasi bergerak saja. Dan agar menjadikannya hidup saya juga menggunakan gambar gif.



Membuat Animasi Luar Angkasa

Cara penggunaannya hanya menggunakan CSS dan HTML jadi tidak perlu javascript disini. Ini adalah contoh yang menurut saya paling mudah. Berikut adalah caranya :

1. Pertama kita membutuhkan gambar. Pada contoh kali ini saya akan menggunakan 5 gambar yaitu background bintang, bumi, pesawat, awan dan untuk kelap-kelip bintang. Sobat bisa mendownload dari gambar dibawah atau bisa mencarinya sendiri

Gambar Bintang

Gambar Bumi

 

Gambar Pesawat

 

Gambar Kabut

 

Gambar Kelap-kelip

Sobat bisa juga menambahkan dengan gambar sobat sendiri.

 

2. Selanjutnya kita membuat cssnya. Pada contoh saya akan membuat gambar bergerak dari kanan ke kiri. Oleh karena itu saya membutuhkan @keyframes. Berikut adalah penjelasan dari cssnya

a.Stars/ Bintang

Gambar bintang ini adalah untuk background karena bintangnya berwarna putih dan saya meggunakan gambar yg transparan maka saya akan juga menambahkan background warna hitam. Cssnya hanya seperti dibawah

 

b. Roket

Selanjutnya saya akan membuat gambar roket dan saya hanya ingin di tengah saja

 

c. arth/Bumi

Pertama saya akan membuat css earth terlabih dahulu

Untuk membuatnya bergerak kita akan menggunakan keyframe. Cssnya adalah sebagai berikut :

Penjelasan :

  • Jika dilihat dari cssnya itu sama saja. Kenapa ada 4 (@keyframes, @-webkit-keyframes, @-moz-keyframes,@-ms-keyframes)? itu agar bisa berjalan di banyak browser atau Cross Browser. Jadi jika ingin merubah 1 maka sobat harua merubah keempatnya atau jika tidak maka hasilnya akan berbeda antara 1 browser dengan browser lainnya.
  • Untuk from 120% berarti gambar akan dimulai dari sebelah kanan 20% lebih dari ukuran layarnya. Jadi akan ada sedikit delay nantinya.
  • Untuk to -20% artinya gambar akan selesai bergerak dan akan mengulang kembali dari sebelah kanan setelah melewati 20% ukuran layar.
  • Untuk selanjutnya seperti 70px itu adalah tingginya karena saya ingin dibuat sejajar maka from 70px to 70px. Namun jika sobat ingin menampilkan dari pojok kanan atas ke pojok kiri bawah bisa menggunakan from 0px to 150px atau lainnya.
  • Untuk lainnya silahkan sobat coba-coba sendiri.

 

d. Kabut / Awan

Selanjutnya adalah membuat efek kabut luar angkasa, berikut adalah cssnya

Untuk kabut tentunya juga akan bergerak sehingga seperti yang tertera pada css diatas kita membutuhkan keyframe

Pada keyframe kabut ini sedikit berbeda dengan keyframe earth namun sebenarnya sama saja untuk hasilnya. Sobat bisa memilih sendiri ingin menggunakan yang mana tentunya lebih mudah pada cotoh ini.

 

e. Efek kelap-kelip bintang

Untuk efek kelap-kelip bintang hampir mirip seperti kabut namun kita menggunakan repeat dan gambar yg bergerak sehingga menutupi background bintang jadi seolah-olah bintang kelap-kelip.

Untuk keyframenya adalah sebagai berikut :

 

Masih ada 1 css lagi yaitu agar gambar tidak saling tindih seperti dibawah

 

 

Jadi secara keseluruhan maka cssnya akan menjadi seperti dibawah :

 

3. Selanjutnya adalah embuat HTMLnya yang diletakkan pada tag <body> seperti dibawah

 

4. Selanjutnya jalankan project maka akan terlihar seperti gambar dibawah dan gambar akan berjalan dari kanan ke kiri sejajar dan akan mengulang jika sudah sampai kiri

 

Bagaimana menyenangkan bukan untuk belajar css animasi dengan keyframe ini? Jika ini dibuat untuk website sobat tentunya akan menarik bukan? Seiring berjalannya waktu css animasi ini banyak digunakan untuk website atau company profile perusahaan dan saya yakin akan berkembang setiap saat dan akan booming dan menjadi suatu kewajiban bagi website untuk menambahkan css animasi. Masih banyak kreasi dari css animasi. Ini merupakan contoh paling mudah karena tidak menggunakan javascript kan kita menggunakan .gif agar terlihat dihidup. Nanti jika ada kesempatan saya juga akan membuat css animasi dari gambar jpg yang kita gabungkan. Selanjutnya saya juga akan membuat css animasi seperti contoh diatas namun dengan isi gambar dan pergerakan yang lebih beragam.

Baca juga :

Cara Membuat CSS Animasi Bawah Laut dengan HTML dan CSS

 

Css animasi tentunya bisa sobat gunakan sebagai banner website atau background. Sobat bisa kreasikan sesuai imajinasi sobat sehingga menghasilkan tampilan yang bagus dan sesuai dengan tema website. Sekian postingan saya tentang Cara Membuat CSS Animasi Space / Luar Angkasa HTML dan CSS. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :



Sampai jumpa pada postingan saya selanjutnya..

 

One thought on “Cara Membuat CSS Animasi Space / Luar Angkasa HTML dan CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

one × four =