CARA MEMBUAT GAMBAR BERGERAK KEKANAN , KEKIRI ,KEATAS DAN KEBAWAH

CARA MEMBUAT GAMBAR BERGERAK KEKANAN DAN KEKIRI KODE HTML SLIDSHOW GAMBAR

• Membuat slideshow gambar yang menarik dan interaktif dengan kode HTML.
• Menggunakan kode HTML untuk membuat gambar bergerak ke kanan dan ke kiri.
• Membuat slideshow gambar yang dapat diakses oleh semua perangkat, termasuk desktop, tablet, dan smartphone.

Membuat Slideshow Gambar

• Membuat struktur HTML dasar untuk slideshow gambar.
• Menambahkan gambar ke dalam slideshow dengan menggunakan tag img.
• Mengatur ukuran dan posisi gambar dengan menggunakan CSS.
• Menambahkan tombol navigasi untuk mengontrol slideshow.
• Menggunakan JavaScript untuk membuat slideshow berjalan secara otomatis.

Membuat Efek Bergerak dan Transisi

• Membuat efek bergerak ke kanan dan ke kiri dengan menggunakan CSS transitions.
• Mengatur kecepatan dan durasi transisi untuk membuat efek yang halus.
• Menambahkan efek transisi untuk membuat slideshow lebih menarik.
• Menggunakan CSS animations untuk membuat efek yang lebih kompleks.
• Mengatur timing dan durasi animasi untuk membuat efek yang sesuai.

Membuat Slideshow Gambar Responsif

• Membuat slideshow gambar yang responsif dengan menggunakan media queries.
• Mengatur ukuran dan posisi gambar berdasarkan ukuran layar.
• Menambahkan kode CSS untuk membuat slideshow berjalan dengan baik di semua perangkat.
• Menggunakan flexbox untuk membuat slideshow yang fleksibel dan responsif.
• Mengatur margin dan padding untuk membuat slideshow yang rapi dan terstruktur.

Kesimpulan

• Membuat slideshow gambar yang menarik dan interaktif dengan kode HTML.
• Menggunakan kode HTML, CSS, dan JavaScript untuk membuat slideshow yang responsif dan bergerak.
• Membuat slideshow gambar yang dapat diakses oleh semua perangkat.
• Menggunakan kode yang sederhana dan mudah dipahami untuk membuat slideshow yang efektif.
• Membuat slideshow gambar yang dapat disesuaikan dengan kebutuhan dan preferensi pengguna.

Contoh 1 :
Kode HTML untuk membuat gambar berjalan dari arah kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background putih adalah sebagai berikut :

<marquee bgcolor="#ffffff" direction="left" height="118px" scrollamount="5" width="100%"><img src="URL Gambar-1" /></marquee>

 

Contoh tampilan 

 

Contoh 2 :

Kode HTML untuk membuat gambar berjalan dari arah kiri ke kanan dengan tinggi area 118px, lebar area 100% di atas background kuning adalah sebagai berikut :.

<marquee bgcolor="#ffff00" direction="right" height="118px" scrollamount="5" width="100%"><img src="URL Gambar-2" /></marquee> 

 

Contoh  tampilan :

 

Contoh 3 :

Kode HTML untuk membuat gambar berjalan bolak-balik dari kanan ke kiri dengan tinggi area 118px, lebar area 100% di atas background biru adalah sebagai berikut:

<marquee behavior="alternate" bgcolor="#0000ff" height="118px" scrollamount="5" width="100%"><img src="URL Gambar-3" /></marquee> 

 

Contoh tampilan :

 

Contoh 4 :
Kode HTML untuk membuat gambar berjalan dari kanan ke kiri dimana gambar tersebut merupakan sebuah link kehidupan yang diperingatkan pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.

<marquee align="left" bgcolor="#c9fbd3" direction="left" height="118" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%"><a href="Link URL-1"><img src="URL Gambar-1" /></a><a href="Link URL-2"><img src="URL Gambar-2" /></a><a href="Link URL-3"><img src="URL Gambar-3" /></a></marquee>

 

Contoh tampilan

Contoh 5 :
Kode HTML untuk membuat gambar berjalan dari atas ke bawah dimana gambar tersebut merupakan sebuah link kehidupan yang membuka pada suatu URL. Gambar tersebut akan berhenti setiap kali mouse didekatkan dan akan kembali bergerak setelah mouse menjauh.

<marquee behavior="scroll" bgcolor="#c9fbd3" direction="up" height="300" scrollamount="3" width="150"><img src="url gambar" /> <img src="url gambar" /><img src="url gambar" /></marquee>

 

Contoh tampilan

 

Bila ingin bergerak dari atas ke bawah tinggal ganti saja direction="down",

scrollamount adalah kecepatan gerakan makin tinggi nilainya maka semakin cepat gerakannya.

Catatan  :

• #FFFF00 adalah kode keksadesimal untuk warna kuning, #C9FBD3 adalah kode heksadesimal untuk warna hijau muda, #0000FF adalah kode heksadesimal untuk warna biru dan seterusnya. Lebih lengkapnya dapat dilihat pada artikel sebelumnya mengenai kode warna.
• Ganti semua URL Gambar (URL Gambar-1, URL Gambar-2, dan URL Gambar-3) dengan URL gambar Anda sendiri.
• Ganti semua Link URL (Link URL-1, Link URL-2, dan Link URL-3) sesuai kebutuhan.