Image Gallery Slideshow With CSS Keyframes
CSS Slideshow Tutorial - Tampilan saya sederhanakan dan dimodifikasi ulang dari postingan sebelumnya tentang » Efek Slide Show Otomatis Pada Gambar, efek pergantian gambar slide menggunakan elemen CSS animation-delay dengan skala per 6s (6detik).

Konsep Dasar Membuat Slideshow Effect
1.1 CSS Element

Siapkan beberapa Gambar yang akan kita susun dalam album, yang nantinya akan ditampilkan secara bergantian satu gambar per 6detik dengan efek otomatis slide, susunannya seperti ini:


/* tanpa animation-delay */
.pic-1 {opacity:1;background:url(http://URL-Gambar)}
.pic-2 {
  /* with animation-delay per (6detik) */
  animation-delay: 6s;
  background:url(http://URL-Gambar)
}

/* sampai gambar berikutnya, dengan selisih 6detik (delay:6s) */
.pic-3 {....}
.pic-4 {....}


Selanjutnya tinggal menyusun bentuk pergantian gambar dengan slideshow perintah, namun jangan lupa untuk membuat pergantian gambarnya secara terus menerus, gambar akan berganti dengan selang waktu 6 detik sampai menampilkan gambar terakhir, dan akan kembali ke gambar pertama, begitu seterusnya (otomatis slide) menggunakan animation:linear infinite seperti ini:


figure {
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  animation:slideShow 24s linear infinite 0s
}

/* Tahap akhir memanggil fungsinya dengan media keyframes (@keyframes) */
@keyframes slideShow {
  0% {opacity:0;transform:scale(1)}
  4% {opacity:1}
  24% {opacity:1}
  28% {opacity:0;transform:scale(1.1)}
  100% {opacity: 0;transform:scale(1)}
}


1.2 HTML Markup

Selesai menyusun semua konsepnya dengan CSS, tinggal menampilkan hasil kerja Anda dengan pemanggil HTML berdasarkan atribut class(.) atau id(#) sesuai tahap penyusunan yang Anda deklerasikan seperti ini:


<div class="pic-wrapper">
   <figure class="pic-1"></figure>
   <figure class="pic-2"></figure>
   <figure class="pic-3"></figure>
   <figure class="pic-4"></figure>
</div>

Dan hasilnya :




DEMO SHOW




Bagaimana menurut sahabat semua pecinta SAHABAT BLOGGER 77, cara membuat efek slideshow dengan CSS seperti diatas cukup mudah bukan..!!. Yang terpenting adalah ukuran dan waktu pergantian gambar harus sesuai dengan gambar yang akan ditampilkan berikutnya.

Susunan CSS lengkapnya seperti ini:


.pic-wrapper {position:relative;height:250px;width:40%;margin:0 auto}
figure {
  position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;
  animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s}

.pic-1 {opacity:1;border:3px solid yellow;background:url(http://URL-Gambar)}
.pic-2 {
  animation-delay: 6s;-moz-animation-delay: 6s;-webkit-animation-delay: 6s;
  border:3px solid lime;background:url(http://URL-Gambar)}

.pic-3 {
  animation-delay: 12s;-moz-animation-delay: 12s;-webkit-animation-delay: 12s;
  border:3px solid aqua;background:url(http://URL-Gambar)}

.pic-4 {
  animation-delay: 18s;-moz-animation-delay: 18s;-webkit-animation-delay: 18s;
  border:3px solid red;background: url(http://URL-Gambar)}

.pic-1,.pic-2,.pic-3,.pic-4 {
  -webkit-background-size: cover;
  -moz-background-size: cover;
   background-size: cover}

@keyframes slideShow {
0% {opacity:0;transform:scale(1)}
4% {opacity:1}
24% {opacity:1}
28% {opacity:0;transform:scale(1.1)}
100% {opacity: 0;transform:scale(1)}}

/* insert support peramban browser codes */
@-webkit-keyframes slideShow {....}
@-moz-keyframes slideShow {....}
@-ms-keyframes slideShow {....}
@-o-keyframes slideShow {....}


<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= CSS Slideshow Tutorial
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

24 komentar

  1. .Cocok untuk blog personal atau website yang memiliki gallery photo ya mbak jika ingin menggunakan slideshow seperti ini.
    .Nice again mbak devy. :)

    BalasHapus
    Balasan
    1. Lebih tepatnya sih seperti itu mas, karena kalau album atau gallery foto sudah pasti menyimpan banyak foto didalamnya, jadi dengan CSS bisa membuat tampilan blog lebih cepat loadingnya. (dibanding dengan js-jQuery)

      Hapus
  2. nice mba infonya, bisa di pke nih CSS'a klo akhir bulan blog jadi posting foto" liburan :)

    BalasHapus
  3. scriptnya banyak juga tuh, bukannya ada di aplikasi power point ya kalau membuat slide show nya :)

    BalasHapus
    Balasan
    1. Bahasa HTML dalam Template tidak menerima script dari power poit mas, tampilan Template dibentuk dengan CSS, HTML dan js untuk membuat rangka, bukan dengan aplikasi.

      jika membuat efek slide dengan Power point, dalam blog hanya sebagai tampilan gambar (format gif)

      Hapus
  4. pergerakan cssnya lembut kayak orangnya. ehemmmm...
    bisa juga ya cuma pake css, dulunya banyak yang menggunakan jquery. saya malah mandeg eh sista belajar codingnya. tapi mau dimulai lagi pelan-pelan lalu diterapkan. ok saya numpang belajar dulu ya css slideshownya. salam sahabat blogger.

    BalasHapus
    Balasan
    1. lebih praktis dan tidak menggunakan banyak element bentuk, karena js-jQuery sifatnya perintah, yang jika script itu kita susun langsung dapat bekerja, itu sebabnya blog menjadi Lambat Loading

      kalau CSS sifatnya individu, yang mengatur objek mana yang akan bergerak jika diperintahkan, lebih cepat loading karena susunannya adalah pembentukan objek yang akan dipanggil, jika objek tersebut tidak dipanggil maka tidak akan merespon atau bekerja.

      Hapus
    2. emangnya kuliah ambil jurusan apaan nih??

      Hapus
  5. thanks buat ilmunya mba,, jadi nambah wawasan niih... good job

    BalasHapus
  6. wow efek nya keren. lembut lembut gimana gitu.. :>)

    BalasHapus
  7. Menyimak tapi tak paham hahaha #Tobat

    BalasHapus
    Balasan
    1. emang pernah alami apa mas dengan CSS slideshow, sampai tobat begitu..!!
      hihihi..!! kalau begitu jangan dipakasain untuk belajar, ntar bisa BOTAK lagi

      Hapus
    2. nyindir saya ya mbak, pake botak segala,

      emang sih, saya baru outbond.. kakakakak

      Hapus
  8. keren banget nih mbak slideshow nya,
    kebayang kalo gambarnya serem, makin lama makin deket,, hehehe

    BalasHapus
  9. kalau minat seronok bikin benda nie..

    BalasHapus
  10. bertanya lagi nih mbak devy kode-kode seperti ini dimasukkan di postingan atau didalam template

    BalasHapus
  11. Wah mantep nih ilmu css nya, bisa diterapkan di blog ane hehee,.. Thank you sharingnya mbak

    BalasHapus
  12. nyimak, sambil belajar, moga-moga bisa dan ngak sampai botak nih kepala,

    BalasHapus
  13. pasti blognya akan lebih menarik klo pakai slideshow ini ya.. bikin berat loading/nggk ya?

    BalasHapus
  14. Keren buat blog berita juga tuh, atau jualan online :D

    BalasHapus
  15. maih belum paham dengan kode-kode nya mas hehehe saya menyimak ajah deh :)

    BalasHapus
  16. terimakasih banyak, sangat membantu sekali nih..

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK