Navigasi Button Untuk SlideShow

Hari ini kami ingin berbagi beberapa inspirasi untuk navigasi navigasi dengan Anda. Ada begitu banyak cara kreatif untuk menunjukkan elemen kecil yang merupakan bagian penting dari banyak situs web saat ini. Anda dapat menemukannya di tayangan slide konten, sebagai bagian dari navigasi halaman, galeri foto dan banyak lagi. Indikator ini sebagian besar digambarkan sebagai panah yang menunjuk ke kiri dan kanan. Tentu saja ada panah yang mengarah ke atas dan ke bawah juga. Tapi hari ini kita ingin fokus pada yang lateral dan menciptakan beberapa efek hover yang menarik yang dalam beberapa kasus meningkatkan elemen, atau menunjukkan preview konten yang akan datang.
Efek ini untuk inspirasi Anda. Harap dicatat bahwa mereka hanya akan bekerja di browser modern. Perhatikan juga bahwa kita menggunakan status elemen hover untuk menunjukkan efek yang bukan merupakan solusi untuk perangkat sentuh.
Gambar yang digunakan dalam demo tersebut adalah oleh Joanna Kustra, Idleformat dan Andrey Yakovlev & Lili Aleeva.
Salah satu efeknya, efek Slit, terinspirasi oleh efek keren dari navigasi kerja Jam3.
Contoh untuk salah satu gaya adalah sebagai berikut:

<nav class="nav-thumbflip">
 <a class="prev" href="/item1">
  <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span>
  <img src="img/9.png" alt="Previous thumb"/>
 </a>
 <a class="next" href="/item3">
  <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
  <img src="img/10.png" alt="Next thumb"/>
 </a>
</nav>

Panah adalah SVG yang kami sertakan dengan menggunakan teknik yang dijelaskan oleh Oleg Solomka dalam artikelnya SVG Icons FTW.
CSS adalah sebagai berikut untuk contoh ini:

.nav-thumbflip a {
 perspective: 1000px;
}

.nav-thumbflip a.prev {
 perspective-origin: 100% 50%;
}

.nav-thumbflip a.next {
 perspective-origin: 0% 50%;
}

.nav-thumbflip .icon-wrap {
 display: block;
 width: 100px;
 height: 100px;
 background-color: #b1a798;
 transition: background-color 0.3s;
}

.nav-thumbflip svg.icon {
 position: relative;
 top: 50%;
 transition: fill 0.3s;
 transform: translateY(-50%);
 fill: #fff;
}

.nav-thumbflip img {
 position: absolute;
 top: 0;
 transition: transform 0.3s;
 backface-visibility: hidden;
}

.nav-thumbflip a.prev img {
 left: 100%;
 transform: rotateY(90deg);
 transform-origin: 0% 50%;
}

.nav-thumbflip a.next img {
 right: 100%;
 transform: rotateY(-90deg);
 transform-origin: 100% 50%;
}

.nav-thumbflip a:hover .icon-wrap {
 background-color: #fff;
}

.nav-thumbflip a:hover svg.icon {
 fill: #c1b8ab;
}

.nav-thumbflip a:hover img {
 transform: rotateY(0deg);
}

Perhatikan bahwa kita memiliki beberapa gaya umum yang akan memusatkan jangkar navigasi ke dalam wadah.
Berikut adalah beberapa gaya lain:

Lihat Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Kami harap Anda menikmati gaya ini dan menemukannya inspirasi!
Source: Tympanus