Cara Membuat CSS Animasi Bawah Laut dengan HTML dan CSS – Setelah kemarin saya memposting tentang Cara Membuat CSS Animasi Space / Luar Angkasa HTML dan CSS, maka kali ini saya akan memposting tentang animasi bawah laut yang gambarnya lebih banyak dan pergerakannya lebih banyak juga. Tidak seperti postingan sebelumnya, animasi hanya bergerak dari kanan ke kiri. Untuk saat ini saya akan membuat dengan gambar yang bergerak kanan ke kiri, kiri ke kanan, bawah ke atas dan dengan kecepatan yang berbeda-beda. Oke langsung saja saya berikan contohnya dibawah. Untuk melihat hasilnya sobat bisa lihat hasilnya dibawah
Membuat Animasi Bawah Laut
Sama seperti postingan sebelumnya, pertama kita perlu menyiapkan gambar terlebih dahulu. Gambarnya bisa sobat download dari gambar dibawah atau bisa isi dengan gambar sobat sendiri.
Gambar yang saya gunakan adalah gambar .gif jadi memang sudah bergerak-gerak dari awal jadi kita tidak perlu membuatnya bergerak lagi. Untuk membuat gambar jpg untuk dibuat bergerak tentunya kita membutuhkan gambar per frame seperti ‘sprite animation css‘ yang gambarnya juga tersedia banyak di google yang nantinya juga kalo ada kesempatan saya posting juga. Oke setelah sobat sudah mendapatkan gambarnya selanjutnya kita membuat cssnya, caranya adalah sebagai berikut :
1. Buat gambarnya css satu per satu, cotohnya adalah
a. Background laut
Pertama tentunya kita membuat background lautnya yang cssnya adalah sebagai berikut
|
1 2 3 4 |
.sea { background:#000 url(images/sea.gif) no-repeat top center; background-size: cover; } |
b. Kapal
Selanjutnya kita juga akan membuat kapal selamnya berada di tengah dan tetap, cssnya adalah sebagau berikut
|
1 2 3 4 5 6 |
.kapal { -ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg); margin: 300px 0px 0px 45%; } |
c. Ikan yang bergerak dari kanan ke kiri
Untuk membuatnya bergerak berulang-ulang kita perlu menggunakan keyframe, berikut ini adalah css untuk membuat animasi bergerak dari kanan ke kiri
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes animate-kanan-kiri { from { background-position: 120% 70px, 0px 0px, 0px 0px; } to { background-position: -20% 70px, -1000px 0px, -500px 0px; } } @-webkit-keyframes animate-kanan-kiri { from { background-position: 120% 70px, 0px 0px, 0px 0px; } to { background-position: -20% 70px, -1000px 0px, -500px 0px; } } @-moz-keyframes animate-kanan-kiri { from { background-position: 120% 70px, 0px 0px, 0px 0px; } to { background-position: -20% 70px, -1000px 0px, -500px 0px; } } @-ms-keyframes animate-kanan-kiri { from { background-position: 120% 70px, 0px 0px, 0px 0px; } to { background-position: -20% 70px, -1000px 0px, -500px 0px; } } |
Seperti yang sudah saya jelaskan di postingan sebelumnya. Kita membuat 4x keyframeframe atau cssnya karena untuk Cross Browser jadi animasi akan berjalan pada semua browser karena ada beberapa browser yang mempunyai kode tambahan untuk cssnya. Selanjutnya kita buat css untuk ikannya
– Ikan Layar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.layar2 { margin-top: 475px; background-size: 60px; background-image: url(images/layar.gif); background-position: 120% 70px, 0px 0px, 0px 0px; background-repeat: no-repeat, repeat-x, repeat-x; -moz-animation: animate-kanan-kiri linear 50s infinite; -ms-animation: animate-kanan-kiri linear 50s infinite; -o-animation: animate-kanan-kiri linear 50s infinite; -webkit-animation: animate-kanan-kiri linear 50s infinite; animation: animate-kanan-kiri linear 50s infinite; } |
Untuk waktunya untuk bergerak dari kanan ke kiri saya set 50s atau 50 detik.
– Ikan Hiu
|
1 2 3 4 5 6 7 8 9 10 11 |
.shark { margin-top: 400px; background-size: 150px; background-image: url(images/shark.gif); background-repeat: no-repeat, repeat-x, repeat-x; -moz-animation: animate-kanan-kiri linear 20s infinite; -ms-animation: animate-kanan-kiri linear 20s infinite; -o-animation: animate-kanan-kiri linear 20s infinite; -webkit-animation: animate-kanan-kiri linear 20s infinite; animation: animate-kanan-kiri linear 20s infinite; } |
Untuk ikan hiu ini saya set kecepatannya lebih cepat yaitu 20 detik.
– Ikan Paus
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.whale { margin: 0px auto; background-size: 300px; background-image: url(images/whale.gif); background-position: 120% 70px, 0px 0px, 0px 0px; background-repeat: no-repeat, repeat-x, repeat-x; -moz-animation: animate-kanan-kiri linear 50s infinite; -ms-animation: animate-kanan-kiri linear 50s infinite; -o-animation: animate-kanan-kiri linear 50s infinite; -webkit-animation: animate-kanan-kiri linear 50s infinite; animation: animate-kanan-kiri linear 50s infinite; } .whale2 { margin: 0px auto; background-size: 150px; background-image: url(images/whale.gif); background-position: 150% 70px, 50px 0px, 0px 0px; background-repeat: no-repeat, repeat-x, repeat-x; -moz-animation: animate-kanan-kiri linear 53s infinite; -ms-animation: animate-kanan-kiri linear 53s infinite; -o-animation: animate-kanan-kiri linear 53s infinite; -webkit-animation: animate-kanan-kiri linear 53s infinite; animation: animate-kanan-kiri linear 53s infinite; } |
Untuk paus kita buat 2 css karena untuk induk dan anaknya dan tentunya kecepatannya juga berbeda yaitu 50 detaik untuk induk dan 53 detik untuk anaknya.
– Ikan 1
|
1 2 3 4 5 6 7 8 9 10 11 |
.fish1{ margin-top: 200px; background-size: 50px; background-image: url(images/fish3.gif); -moz-animation: animate-kanan-kiri linear 13s infinite; -ms-animation: animate-kanan-kiri linear 13s infinite; -o-animation: animate-kanan-kiri linear 13s infinite; -webkit-animation: animate-kanan-kiri linear 13s infinite; animation: animate-kanan-kiri linear 13s infinite; background-repeat: no-repeat, repeat-x, repeat-x; } |
ikan ini saya buat cepat dengan waktu 13 detik saja.
-Ikan 2 & 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.fish2{ margin-top: 350px; background-size: 50px; background-image: url(images/fish.gif); -moz-animation: animate-kanan-kiri linear 73s infinite; -ms-animation: animate-kanan-kiri linear 73s infinite; -o-animation: animate-kanan-kiri linear 73s infinite; -webkit-animation: animate-kanan-kiri linear 73s infinite; animation: animate-kanan-kiri linear 73s infinite; background-repeat: no-repeat, repeat-x, repeat-x; } .fish3{ margin-top: 500px; background-size: 50px; background-image: url(images/fish.gif); -moz-animation: animate-kanan-kiri linear 153s infinite; -ms-animation: animate-kanan-kiri linear 153s infinite; -o-animation: animate-kanan-kiri linear 153s infinite; -webkit-animation: animate-kanan-kiri linear 153s infinite; animation: animate-kanan-kiri linear 153s infinite; background-repeat: no-repeat, repeat-x, repeat-x; } |
Ikan ini saya buat 2 kali dengan kecepatan yang bebeda-beda.
d. Kuda Laut
Untuk keyframe atau animasi geraknya saya buat seperti ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes animate-kudalaut { 0% {background-position:850px 600px;} 100% {background-position:100px 0px;} } @-webkit-keyframes animate-kudalaut { 0% {background-position:850px 600px;} 100% {background-position:100px 0px;} } @-moz-keyframes animate-kudalaut { 0% {background-position:850px 600px;} 100% {background-position:100px 0px;} } @-ms-keyframes animate-kudalaut { 0% {background-position:850px 600px;} 100% {background-position:100px 0px;} } |
Sedangkan untuk css gambarnya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.kudalaut { margin: 0px auto; background-size: 70px; background-image: url(images/kudalaut.gif); background-position: 120% 70px, 0px 0px, 0px 0px; background-repeat: no-repeat, repeat-x, repeat-x; -moz-animation: animate-kudalaut linear 50s infinite; -ms-animation: animate-kudalaut linear 50s infinite; -o-animation: animate-kudalaut linear 50s infinite; -webkit-animation: animate-kudalaut linear 50s infinite; animation: animate-kudalaut linear 50s infinite; } |
Kuda laut ini saya buat dari bawah (tengah) ke atas dengan kecepatan 50 detik.
e. Lumba-lumba
Css geraknya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes move-lumba { from { background-position: -20% 70px, -1000px 0px, -500px 0px; } to { background-position: 120% 70px, 0px 0px, 0px 0px; } } @-webkit-keyframes move-lumba { from { background-position: -20% 70px, -1000px 0px, -500px 0px; } to { background-position: 120% 70px, 0px 0px, 0px 0px; } } @-moz-keyframes move-lumba { from { background-position: -20% 70px, -1000px 0px, -500px 0px; } to { background-position: 120% 70px, 0px 0px, 0px 0px; } } @-ms-keyframes move-lumba { from { background-position: -20% 70px, -1000px 0px, -500px 0px; } to { background-position: 120% 70px, 0px 0px, 0px 0px; } } |
Sedangkan untuk css gambarnya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 |
.lumba{ margin-top: 0; background-size: 120px; background-image: url(images/lumba.gif); -moz-animation: move-lumba linear 73s infinite; -ms-animation: move-lumba linear 73s infinite; -o-animation: move-lumba linear 73s infinite; -webkit-animation: move-lumba linear 73s infinite; animation: move-lumba linear 73s infinite; background-repeat: no-repeat, repeat-x, repeat-x; } |
Untuk lumba-lumba saya buat dari kiri ke kanan dengan kecepatan 73 detik.
f. Ikan
Untuk keyframe saya buat seperti dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes move-fish0 { from {background-position:0 0;} to {background-position:1000px 2000px;} } @-webkit-keyframes move-fish0 { from {background-position:0 0;} to {background-position:1000px 2000px;} } @-moz-keyframes move-fish0 { from {background-position:0 0;} to {background-position:1000px 2000px;} } @-ms-keyframes move-fish0 { from {background-position:0 0;} to {background-position:1000px 2000px;} } |
Sedangkan untuk css gambarnya saya buat seperti dibawah
|
1 2 3 4 5 6 7 8 9 10 11 |
.fish0{ margin-top: 200px; background-size: 50px; background-image: url(images/fish2.gif); -moz-animation: move-fish0 linear 200s infinite; -ms-animation: move-fish0 linear 200s infinite; -o-animation: move-fish0 linear 200s infinite; -webkit-animation: move-fish0 linear 200s infinite; animation:move-fish0 200s linear infinite; background-repeat: no-repeat, repeat-x, repeat-x; } |
Untuk ikan ini saya buat dari atas dan serong ke bawah dalam waktu 200 detik sehingga terlihat lambat.
2. Selanjutnya jangan lupa untuk menambahkan css dibawah ini guna membuat posisi gambar tidak bertabrakan atau lebih rapi
|
1 2 3 4 5 6 7 8 9 |
.sea, .layar, .layar2, .fish, .whale, .whale2, .shark, .fish0, .fish1, .fish2, .fish3, .lumba, .kudalaut { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; display:block; } |
3. Tambahkan HTML nya seperi dibawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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="background-sea"> <div class="sea"></div> <div class="whale"></div> <div class="whale2"></div> <div class="layar"></div> <div class="layar2"></div> <div class="shark"></div> <div class="fish0"></div> <div class="fish1"></div> <div class="fish2"></div> <div class="fish3"></div> <div class="lumba"></div> <div class="kudalaut"></div> </div> <img src="images/kapal.gif" alt="kapal" class="kapal" width="290px"> <div class="fixed-bottom" align="center"> <div class="text-white"> © <?php echo date('Y'); ?> Copyright : <a class="text-white" href="https://dewankomputer.com/"> Dewan Komputer</a> </div> </div> |
Sobat bisa gunakan gambar ini untuk banner ataupun background terserah sobat tinggal sesuaikan saja cssnya dengan website sobat.
4. Jika berhasil saat menjalankan projectnya maka akan jadi seperti dibawah
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 atau bernama ‘sprite animation css’.
Baca juga
Cara Membuat CSS Animasi Space / Luar Angkasa 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 :