Ketika sebaris kode tak berhenti menatap dan tampak naksir kepada Anda.

CSS3 Slideshow Tanpa Loncatan Halaman

Pure CSS3 Slideshow Without Page Jump

Saya sudah sangat sering melihat beberapa eksperimen tentang slideshow dengan CSS3 yang memanfaatkan selektor :target untuk mengakses setiap slide. Sehingga jika salah satu tombol navigasi diklik, maka salah satu slide dengan ID yang sesuai dengan #hash pada URL akan ditampilkan:

#css3-slider img {
  display:none;
}

#css3-slider img:target {
  display:block;
}

Namun sayangnya CSS :target akan membuat halaman meloncat. Ini adalah sikap normal konsep fragment identifier halaman » Tentang CSS :target

Ada satu cara lain untuk mengakses setiap slide tanpa menyebabkan loncatan halaman, yaitu dengan menggunakan hack elemen input bertipe checkbox atau radio. Mereka bisa dimanfaatkan karena mereka memiliki selektor pseudo-class :checked. Dan tentunya, elemen input tidak akan menyebabkan loncatan halaman seperti halnya tautan. Sedangkan untuk mengakses setiap slide, kita akan menggunakan selektor + atau ~ untuk mengakses elemen yang terletak tepat di sebelah elemen yang ditandai/dicentang (:checked).

Beginilah konsep yang Saya gunakan: Kita menggunakan elemen <label> untuk mengeksekusi elemen <input type="radio">, sehingga kita bisa mengatur tampilannya dan bisa melupakan radio yang tidak pernah bisa diubah tampilannya menggunakan CSS (Setidaknya untuk saat ini. Masa depan, siapa yang tahu?)
Kita menggunakan radio hanya sebagai penyimpan aksi checked atau unchecked untuk mengakses setiap slide secara bergantian:

#css3-slider img {
  display:none;
}

#css3-slider input:checked + img {
  display:block;
}
<input type="radio" name="num" id="s1" />
<label for="s1">1</label>
<img src="slide1.png" />

Versi Lengkap

Berikut ini adalah versi lengkap dari konsep yang Saya nyatakan di atas untuk mengatasi masalah loncatan halaman karena CSS :target. Setelah ini Anda tidak lagi memerlukan CSS :target, yang Anda perlukan hanya radio. Agak sulit untuk dijelaskan secara tertulis, Anda hanya bisa mengetahui cara kerjanya dengan cara mempelajari kode di bawah ini setelah Anda mengerti tentang Adjacent Sibling Selectors:

HTML

<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='slide-1.jpg' />
            <span>Why do you put the egg yolks on your eyes?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='slide-2.jpg' />
            <span>How can you look ahead if your eyes are on the side?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='slide-3.jpg' />
            <span>Keep praying to God</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='slide-4.jpg' />
            <span>Stay relaxed</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src='slide-5.jpg' />
            <span>And you will forever be relaxed</span>
        </a>
    </li>
</ul>

CSS

/*
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://hompimpaalaihumgambreng.blogspot.com
 */

/* General */
#css3-slider {
  margin:30px auto;
  padding:0px 0px;
  width:448px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigation */
#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

/* Captions */
#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* Active navigation */
#css3-slider li input:checked + label {
  background-color:#39f;
  color:white;
}

/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  top:0%;
  left:0%;
  width:448px;
  height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;
  z-index:99;
}

/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;
}

/* Hide the radio */
#css3-slider input {
  display:none;
}

Slideshow ini bekerja pada semua peramban yang memiliki prefiks CSS3 yang tercantum di atas (FF, Opera, Chrome, Safari dan IE). Masih tetap bisa bekerja pada IE9 dengan fallback yang baik (slide berpindah tanpa efek transisi).
Tampilan terbaik pada Opera 11.62

  

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

 29 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Komunitas

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Info
  1. http://www.dte.web.id/2013/12/daftar-salinan-berkas-widget-halaman.html
  2. http://www.dte.web.id/2013/02/hosting-file-dengan-google-code-dan.html
Tutup
Ke atas!