Cara Membuat CSS Animasi Bawah Laut dengan HTML dan CSS

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

 

b. Kapal

Selanjutnya kita juga akan membuat kapal selamnya berada di tengah dan tetap, cssnya adalah sebagau berikut

 

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

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

Untuk waktunya untuk bergerak dari kanan ke kiri saya set 50s atau 50 detik.

 

– Ikan Hiu

Untuk ikan hiu ini saya set kecepatannya lebih cepat yaitu 20 detik.

 

– Ikan Paus

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

ikan ini saya buat cepat dengan waktu 13 detik saja.

 

-Ikan 2 & 3

Ikan ini saya buat 2 kali dengan kecepatan yang bebeda-beda.

 

d. Kuda Laut

Untuk keyframe atau animasi geraknya saya buat seperti ini

Sedangkan untuk css gambarnya adalah sebagai berikut

Kuda laut ini saya buat dari bawah (tengah) ke atas dengan kecepatan 50 detik.

 

e. Lumba-lumba

Css geraknya adalah sebagai berikut

Sedangkan untuk css gambarnya adalah sebagai berikut

Untuk lumba-lumba saya buat dari kiri ke kanan dengan kecepatan 73 detik.

 

f. Ikan

Untuk keyframe saya buat seperti dibawah

Sedangkan untuk css gambarnya saya buat seperti dibawah

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

 

3. Tambahkan HTML nya seperi dibawah

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 :



Sampai jumpa pada postingan saya selanjutnya..

 

Leave a Reply

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

four × 1 =