Slideshow Gambar Efek Rotasi 3D Dengan CSS Tanpa Javascript - TahuPost.NET

Sudah lama ya admin tidak update heheh 😅. Sibuk nyoblos, dan admin terdaftar pemilih di kampung halaman alhasil jadinya pulang kampung deh. Dalam postingan kali ini kita akan membahas mengenai slideshow gambar.

Banyak blog yang memasang slideshow gambar tentunya untuk mempercantik tampilan blog atau sebagai hiasan dan galery gambar blog tersebut. Sebagian besar dan hampir semua admin temukan memakai javascript. Contohnya slideshow gambar di bawah ini.

Slideshow gambar di atas menggunakan javascript. Memang hanya membutuhkan configurasi yang sedikit namun sangat efektif untuk membuat kecepatan loading blog menurun.

Nah pertanyaannya apakah bisa membuat slideshow gambar tanpa memakai javascript? Jawabannya bisa! Di sini kita hanya mengandalkan CSS dengan bermain properti animation dan rotateY pada properti transform.

Bagian sulitnya adalah menentukan waktu delay-nya. Waktu yang dibutuhkan agar sampai ke gambar awal adalah 15 detik, karena jumlah gambar ada 10 buah maka 15:10 hasilnya 1.5 detik. Jadi setiap delay pertama ke dua adalah 1.5 detik sampai waktu 13.5 detik.

Admin coba untuk menggunakan 5 gambar tapi itu terlalu cepat dan membuat mata lelah melihatnya. Untuk resolusi gambar terserah sobat, karena di sini pada selector img sudah dipasang properti object-fit: cover; jadi gambar akan menyesuaikan ukuran yang telah diatur.

Hasil slideshow gambar efek 3 dimensinya ada di bawah ini.

Jika berminat, silahkan ambil dan pasang dimana pun pada web/blog kalian. Mudah kok, tinggal copy paste doang.

<style>
/*Slideshow by John Asto https://tahupost.blogspot.com*/
.slideshow
 {
  position: relative;
  width: 230px;
  height: 230px;
  transform-style: preserve-3d;
  perspective: 1000px;
  margin: auto;
 }
 .slideshow .slide
 {
  position: relative;
  animation: animate 15s linear infinite;
  transform: rotateY(90deg);
 }
 .slideshow .slide:nth-child(1)
 {
  animation-delay: 0s;
 }
 .slideshow .slide:nth-child(2)
 {
  animation-delay: 1.5s;
 }
 .slideshow .slide:nth-child(3)
 {
  animation-delay: 3s;
 }
 .slideshow .slide:nth-child(4)
 {
  animation-delay: 4.5s;
 }.slideshow .slide:nth-child(5)
 {
  animation-delay: 6s;
 }
 .slideshow .slide:nth-child(6)
 {
 animation-delay: 7.5s;
 }
 .slideshow .slide:nth-child(7)
 {
 animation-delay: 9s;
 }
 .slideshow .slide:nth-child(8)
 {
 animation-delay: 10.5s;
 }
 .slideshow .slide:nth-child(9)
 {
 animation-delay: 12s;
 } .slideshow .slide:nth-child(10)
 {
 animation-delay: 13.5s;
 }
 .slideshow .slide img
 {
  position: absolute;
  object-fit: cover; 
  transform: rotateY(180deg);
  width: 230px;
  height: 230px;
  margin: 0 auto;
 }
 @keyframes animate
 {
  0%
  {
   transform: rotateY(90deg);
  }
  10%,100%
  {
   transform: rotateY(270deg);
  }
 }</style><div class="slideshow">
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
<div class="slide">
<img src="URL GAMBAR"/>
</div>
</div>

Bagaimana menurut sobat? Keren, jelek atau biasa-biasa saja. Admin juga masih belum maksimal dalam hal CSS3 jadi maklumi.

Bagi yang mau belajar CSS, silahkan ke DuniaIlkom.com atau W3Schools.com. Jikalau belum maksimal dalam berbahasa Inggris saran admin ke DuniaIlkom.com saja.

Sekian sudah postingan ini. Jika ada kesalahan dalam pengucapan ataupun menyinggung admin mohon maaf. Terima kasih atas kunjungannya dan sampai jumpa lagi 🙌.

Related Posts