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
.stars {
background:#000 url(images/stars.png) repeat top center;
}
b. Roket
Selanjutnya saya akan membuat gambar roket dan saya hanya ingin di tengah saja
.rocket {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin: 200px 0px 0px 45%;
}
c. arth/Bumi
Pertama saya akan membuat css earth terlabih dahulu
.earth {
margin: 0px auto;
background-image: url(images/earth.gif);
background-position: 120% 70px, 0px 0px, 0px 0px;
background-repeat: no-repeat, repeat-x, repeat-x;
animation: animate-earth linear 50s infinite;
-moz-animation: animate-earth linear 50s infinite;
-ms-animation: animate-earth linear 50s infinite;
-o-animation: animate-earth linear 50s infinite;
-webkit-animation: animate-earth linear 50s infinite;
}
Untuk membuatnya bergerak kita akan menggunakan keyframe. Cssnya adalah sebagai berikut :
@keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@-webkit-keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@-moz-keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@-ms-keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
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
.mists{
background:transparent url(images/mists.png) repeat top center;
-moz-animation:move-mists-back 200s linear infinite;
-ms-animation:move-mists-back 200s linear infinite;
-o-animation:move-mists-back 200s linear infinite;
-webkit-animation:move-mists-back 200s linear infinite;
animation:move-mists-back 200s linear infinite;
}
Untuk kabut tentunya juga akan bergerak sehingga seperti yang tertera pada css diatas kita membutuhkan keyframe
@keyframes move-mists-back {
from {background-position:0 0;}
to {background-position:-10000px 1000px;}
}
@-webkit-keyframes move-mists-back {
from {background-position:0 0;}
to {background-position:-10000px 1000px;}
}
@-moz-keyframes move-mists-back {
from {background-position:0 0;}
to {background-position:-10000px 1000px;}
}
@-ms-keyframes move-mists-back {
from {background-position: 0 0;}
to {background-position:-10000px 1000px;}
}
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.
.twinks{
background:transparent url(images/twinks.png) repeat top center;
-moz-animation:move-twink-back 200s linear infinite;
-ms-animation:move-twink-back 200s linear infinite;
-o-animation:move-twink-back 200s linear infinite;
-webkit-animation:move-twink-back 200s linear infinite;
animation:move-twink-back 200s linear infinite;
}
Untuk keyframenya adalah sebagai berikut :
@keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
Masih ada 1 css lagi yaitu agar gambar tidak saling tindih seperti dibawah
.stars, .twinks, .mists, .earth {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
}
Jadi secara keseluruhan maka cssnya akan menjadi seperti dibawah :
<style>
@keyframes animate-earth {
from { background-position: 120% 70px, 10px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@-webkit-keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@-moz-keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@-ms-keyframes animate-earth {
from { background-position: 120% 70px, 0px 0px, 0px 0px; }
to { background-position: -20% 70px, -1000px 0px, -500px 0px; }
}
@keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@keyframes move-mists-back {
from {background-position:0 0;}
to {background-position:-10000px 1000px;}
}
@-webkit-keyframes move-mists-back {
from {background-position:0 0;}
to {background-position:-10000px 1000px;}
}
@-moz-keyframes move-mists-back {
from {background-position:0 0;}
to {background-position:-10000px 1000px;}
}
@-ms-keyframes move-mists-back {
from {background-position: 0 0;}
to {background-position:-10000px 1000px;}
}
.stars, .twinks, .mists, .earth {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
}
.stars {
background:#000 url(images/stars.png) repeat top center;
}
.rocket {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
margin: 200px 0px 0px 45%;
}
.twinks{
background:transparent url(images/twinks.png) repeat top center;
-moz-animation:move-twink-back 200s linear infinite;
-ms-animation:move-twink-back 200s linear infinite;
-o-animation:move-twink-back 200s linear infinite;
-webkit-animation:move-twink-back 200s linear infinite;
animation:move-twink-back 200s linear infinite;
}
.earth {
margin: 0px auto;
background-image: url(images/earth.gif);
background-position: 120% 70px, 0px 0px, 0px 0px;
background-repeat: no-repeat, repeat-x, repeat-x;
animation: animate-earth linear 50s infinite;
-moz-animation: animate-earth linear 50s infinite;
-ms-animation: animate-earth linear 50s infinite;
-o-animation: animate-earth linear 50s infinite;
-webkit-animation: animate-earth linear 50s infinite;
}
.mists{
background:transparent url(images/mists.png) repeat top center;
-moz-animation:move-mists-back 200s linear infinite;
-ms-animation:move-mists-back 200s linear infinite;
-o-animation:move-mists-back 200s linear infinite;
-webkit-animation:move-mists-back 200s linear infinite;
animation:move-mists-back 200s linear infinite;
}
</style>
3. Selanjutnya adalah embuat HTMLnya yang diletakkan pada tag <body> seperti dibawah
<nav class="navbar navbar-dark bg-transparent fixed-top">
<a class="navbar-brand" href="index.php" style="color: #fff;">
Dewan Komputer
</a>
</nav>
<div class="stars"></div>
<div class="twinks"></div>
<div class="earth"></div>
<div class="mists"></div>
<div>
<img src="images/pesawat.gif" alt="rocket" class="rocket" width="50px">
</div>
<div class="navbar nav-center bg-transparent fixed-bottom">
<div class="text-white">
© <?php echo date('Y'); ?> Copyright :
<a href="https://dewankomputer.com/"> Dewan Komputer</a>
</div>
</div>
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 :