FOKUS NGE-BLOG – Image gallery adalah salah satu fitur yang sering digunakan pada website untuk menampilkan kumpulan gambar atau foto. Image gallery biasanya memiliki tampilan yang menarik dan interaktif, sehingga dapat meningkatkan pengalaman pengguna dan menarik perhatian pengunjung. Salah satu cara untuk membuat image gallery adalah dengan menggunakan CSS dan tanpa javascript. CSS adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan layout website. Dengan CSS, kita dapat membuat berbagai macam efek dan animasi pada image gallery, seperti vertical scrolling, horizontal scrolling, grid, lightbox, dan lain-lain.
Dalam artikel ini, kita akan membahas cara membuat image gallery dengan vertical scrolling menggunakan CSS tanpa javascript. Vertical scrolling adalah efek dimana gambar-gambar pada image gallery dapat digeser ke atas atau ke bawah dengan menggunakan scroll bar atau mouse wheel. Efek ini dapat memberikan kesan dinamis dan modern pada image gallery. Selain itu, efek ini juga dapat menghemat ruang pada halaman website, karena gambar-gambar tidak perlu ditampilkan secara keseluruhan, melainkan hanya sebagian saja.
Untuk membuat image gallery dengan vertical scrolling menggunakan CSS tanpa javascript, kita akan membutuhkan beberapa langkah, yaitu:
- Membuat struktur HTML untuk image gallery
- Membuat style CSS untuk image gallery
- Membuat media query untuk responsivitas image gallery
Membuat Struktur HTML untuk Image Gallery
Langkah pertama yang harus kita lakukan adalah membuat struktur HTML untuk image gallery. Struktur HTML ini akan berisi elemen-elemen yang dibutuhkan untuk menampilkan gambar-gambar pada image gallery, seperti container, slides, thumbnails, dan scrollbar. Berikut adalah contoh kode HTML untuk image gallery:
<div class="scroll-container">
<img src="img_5terre.jpg" alt="Cinque Terre">
<img src="img_forest.jpg" alt="Forest">
<img src="img_lights.jpg" alt="Northern Lights">
<img src="img_mountains.jpg" alt="Mountains">
</div>Membuat Style CSS untuk Image Gallery
Langkah kedua yang harus kita lakukan adalah membuat style CSS untuk image gallery. Style CSS ini akan berisi aturan-aturan yang dibutuhkan untuk mengatur tampilan dan layout dari image gallery, seperti ukuran, warna, posisi, margin, padding, border, dan lain-lain. Berikut adalah contoh kode CSS untuk image gallery:
.scroll-container {
background-color: #333;
overflow: auto;
white-space: nowrap;
padding: px;
max-width:750px;
height:400px;
}
.scroll-container img {
padding: 5px;
}
Maka hasilnya akan menjadi seperti ini:
