Tutorial Pemrograman

Cara Membuat Gambar Berjalan dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Pasti kamu ada niat dalam membuat gambar yang bisa berjalan sendiri di dalam website agar tampilan website kamu semakin menarik. Misalkan kamu membuat sebuah halaman galeri yang berisi beberapa gambar atau foto yang ada di dalam website, tapi gambar itu bisa berjalan sendiri sehingga si pengunjung (visitor) dapat melihat halaman galeri dengan mudah. Isi galeri gambar atau foto baik itu produk jualan, pengalaman, sumber ilmu pengetahuan, penelitian, dan sebagainya.

Penulis akan berikan tutorial cara membuat gambar berjalan dengan CSS. Sebelum memulai, siapkan 1 gambar bitmap tipenya (jpg, png, bmp, jpeg). Usahakan perbedaan ukuran panjang dan lebar tidak terlalu jauh, agar mudah dimodifikasi dengan CSS.

A. MEMBUAT KERANGKA TAMPILAN GAMBAR DENGAN HTML

1. Silahkan buka teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “gambar-berjalan-css.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome atau Mozilla).

Berikut hasilnya.

Selesai.

Apabila di dalam project website kamu belum ada gambar, silahkan siapkan 1 gambar dulu, kemudian ditaruhkan ke dalam project website kamu, saat sebelum memasuki tahap berikutnya.

Catatan:

Pada kode script di atas, sebenarnya bisa berjalan, namun karena belum ada file style.css di dalam project kamu sehingga tampilannya seperti kerangka awal.

B. MEMBUAT TAMPILAN GAMBAR BERJALAN DENGAN CSS

1. Klik File → New atau tekan CTRL + N untuk membuat halaman baru pada text editor.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “style.css”.

5. Klik Save.

6. Silahkan tekan F5 pada web browser kamu. Lihat hasilnya.

Pada objek gambar yang di dalam background itu terus berjalan sampai selesai.

Catatan: Apabila kamu membuat objek menjadi animasi, maka kamu bisa tambahkan kode script di bawah ini.

Ada kemungkinan beberapa web browser yang tertentu tidak mendukung kode script tersebut secara universal. Jadi, kamu harus menambahkan kode script sebelum @keyframes animateCloud{ }, yakni @-[nama web browser]-keyframes animateCloud{ }.

List-list nama web browser :

  • moz, untuk web browser Mozilla.
  • webkit, untuk web browser Chrome atau Safari.
  • ms, untuk web browser Microsoft Explorer atau Edge.

Jadi, kamu ingin kode script CSS ini mendukung untuk web browser Microsoft Edge pada Windows 10, maka kamu tambahkan kode script seperti ini, @-ms-keyframes animateCloud{ }, agar hasil kode script CSS tersebut bisa berjalan di Microsoft Edge.

Kemudian ditambahkan kode script di bawah ini.

Letakkan kode script ini di bawah barisan penutup @keyframes animateCloud{ }. Kamu bisa mengubah waktu berjalan dari “10s” ke angka sesuai kamu. Satuannya detik atau sekon.

Demikian tutorial cara membuat gambar berjalan dengan CSS. Selamat mencoba.









Click to comment

Leave a Reply

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

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top