Perpindahan Slide Gambar Tanpa Lompatan

Perpindahan Slide Gambar Tanpa Lompatan - Gambar pada blog hakikatnya untuk menerangkan sebuah karya tulisan yang Anda ceritakan dalam sebuah artikel, setelah sekian lama tidak menyapa sahabat semua pecinta SAHABAT BLOGGER 77, dipertemuan kali ini saya ingin memberikan sedikit pembahasan tentang cara mendesain Perpindahan Slide Gambar Tanpa Lompatan. Tutorial kali ini, merupakan hasil pembaharuan dari artikel saya sebelumnya tentang Efek According Pada Gambar Dengan Perintah Hover, yang mana untuk perpindahan gambar saya menggunakan perintah hover, cukup Anda lintasi gambar dengan panah mouse Anda, maka gambar akan berpindah dari gambar satu dan seterusnya.

Untuk slide gambar kali ini, saya akan coba menjawab request mas +Ibrahim M.Pd.I  yang ingin dibuatkan tutorial tentang cara mengubah perpindahan slide gambar dengan perintah KLIK, sehingga untuk melihat gambar berikutnya saya menggunakan perintah pointer mouse dengan sistem klik, karena beliau ingin tampilannya seperti slider efek, saya menggabungkan tombol pemicu untuk pengaturan perpindahan gambar yang saya letakkan tepat dibawah tampilan gambar seperti ini:

Baca juga - Membuat Profil Google Plus Di Sidebar Blog


Jika kita menumpuk banyak gambar, maka akan terjadi lompatan untuk melihat gambar berikutnya, katakanlah seperti pada Handphone misalnya, pada file gambar di komputer Anda, maka akan terjadi jumping slide untuk melihat gambar selanjutnya saat Anda menekan tombol next. Agar hal itu tidak terjadi, disini saya menggunakan CSS transisi dengan efek berputar, sehingga saat gambar akan berpindah efeknya akan terasa halus (tanpa lompatan) seperti ini:




DEMO SHOW



Untuk membuatnya, pertama-tama kita rangkai dahulu pembangun selector CSS-nya seperti berikut, lalu temukan kode ]></b:skin> pada Template Anda, back-up template Anda terlebih dahulu untuk menghindari kesalahan, selanjutnya letakkan CSS berikut tepat diatasnya

//* no jumping image slide with css3
css design: inputcode="slider-sb77","sahabat blogger 77"
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
#sb77-slider {
  margin:30px auto;padding:0px 0px;
  width:448px;height:286px;
  position:relative;}

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

#sb77-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;}

//peletakan gambar dengan durasi tampil
#sb77-slider li:nth-child(2) label {left:28px;}
#sb77-slider li:nth-child(3) label {left:46px;}
#sb77-slider li:nth-child(4) label {left:64px;}
#sb77-slider li:nth-child(5) label {left:82px;}

#sb77-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);}

#sb77-slider a {text-decoration:none !important;}
#sb77-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;}

#sb77-slider li input:checked + label {
  background-color:red;
  color:#fff;
  -webkit-border-radius:50%;
  border-radius:50%;}

#sb77-slider li input:checked ~ img,
#sb77-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;}

#sb77-slider input {display:none;}
#sb77-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;}

Perhatikan kode yang saya beri warna berbeda, pada tahapan ini saya hanya menggunakan 5 buah gambar sebagai contoh dengan durasi jarak per 18px, tambahkan nilai pada gambar akhir sebanyak 18px jika Anda ingin menambahkan beberapa gambar lagi, dan seterusnya. Selanjutnya letakkan kode HTML berikut dimana Anda ingin menampilkannya.

<ul id='sb77-slider'>
    <li>
        <input type='radio' id='s1' name='sahabatblogger77' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='Gambar-1.jpg' />
            <span>SAHABAT BLOGGER 77</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='sahabatblogger77' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='Gambar-2.jpg' />
            <span>SAHABAT BLOGGER 77</span>
        </a>
    </li>
    <li>
        <..!! lanjutkan Untuk gambar ke-3 !!..>
    </li>
    <li>
        <..!! lanjutkan Untuk gambar ke-4 !!..>
    </li>
    <li>
    ...dan seterusnya !!
    </li>
</ul>

Pekerjaan sudah selesai, kini saatnya kita membahas hasil tampilannya pada kolom komentar dibawah, jika suka Katakan Cinta Dengan Tampilan Gambar Efek Rotate seperti pada tutorial sebelumnya.

Terimaksih dan semoga dapat meng-inspirasi sahabat semua

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Perpindahan Slide Gambar Tanpa Lompatan
Ditulis oleh= Devy
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 >>

http://sahabatblogger77.blogspot.com/2014/06/perpindahan-slide-gambar-tanpa-lompatan.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77