Hari ini saya akan membberikan tutorial bagaimana sobat untuk membuat beberapa panel Sliding Image Panels dengan CSS3 saja. Idenya adalah menggunakan gambar latar belakang untuk panel dan mengklik pada label / nomor maka gambar akan bergerak. Saya akan menggunakan Radio Buttons dengan label dan target masing-masing panel dengan mengklik selektor tsb.
Harap dicatat
Hasil dari tutorial ini hanya akan bekerja dalam browser yang mendukung transisi CSS dan animasi.
Langsung saja menuju ke TKP
Markup HTML
HTML ini akan terdiri dari tiga bagian utama: Radio Buttons dan Label, Container dengan panel dan "slice" untuk setiap gambar, dan judul. Container dengan class cr-bgimg bagian akan memiliki divisi untuk masing-masing panel dan di dalam kita akan menempatkan
span untuk setiap gambar dengan posisi latar belakang yang tepat. Jadi, panel pertama akan memiliki empat potong, masing-masing memiliki salah satu gambar sebagai latar belakang dengan posisi paling kiri. Panel kedua akan memiliki lagi empat potong tapi posisi background sekarang akan dipindahkan untuk menunjukkan bagian selanjutnya dari masing-masing gambar:
<section class="cr-container">
<!-- radio buttons and labels -->
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<div class="clr"></div>
<!-- panels -->
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<!-- titles -->
<div class="cr-titles">
<h3>
<span>Serendipity</span>
<span>What you've been dreaming of</span>
</h3>
<h3>
<span>Adventure</span>
<span>Where the fun begins</span>
</h3>
<h3>
<span>Nature</span>
<span>Unforgettable eperiences</span>
</h3>
<h3>
<span>Serenity</span>
<span>When silence touches nature</span>
</h3>
</div>
</section>
Elemen h3 untuk judul akan memiliki dua bentang, satu untuk judul utama dan satu untuk sub-judul.
CSS
Pertama menyembunyikan Radio Buttons dengan dengan label. Dalam web browser, klik pada label akan membuat checkbox masing-masing atau Radio Buttons yang dipilih. Memberikan ID untuk input, kita dapat menggunakan
for = IDREF atribut label untuk referensi masing-masing input.
Kedua, kita menempatkan semua gambar background dengan benar dan ketiga, saya ingin menunjukkan potongan masing-masing gambar dan judul ketika mengklik pada label.
Jadi, style pertama memberikan batasan putih dengan beberapa box shadow:
.cr-container{
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
border: 20px solid #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}Karena kita ingin menggunakan selektor untuk mendapatkan potongan yang tepat dan judul, kita perlu menempatkan label sebelum container. Mari kita pastikan berada di atas sebagai layer (z-index) dan mendorong posisinya turun dengan menambahkan margin atas 350px;
.cr-container label{
font-style: italic;
width: 150px;
height: 30px;
cursor: pointer;
color: #fff;
line-height: 32px;
font-size: 24px;
float:left;
position: relative;
margin-top: 350px;
z-index: 1000;
}Menambah style pada label dengan menambahkan lingkaran kecil. Kita akan memberikan background dan menempatkannya berpusat di balik teks label:
.cr-container label:before{
content:'';
width: 34px;
height: 34px;
background: rgba(130,195,217,0.9);
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}Untuk membuat pemisah antara panel kita akan menggunakan sedikit trik. Kita akan membuat pseudo-elemen lain untuk label dan memperluasnya untuk meregangkan atas panel. Menggunakan gradient, kita akan membuat garis "fade out" di bagian atas:
.cr-container label:after{
width: 1px;
height: 400px;
content: '';
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
position: absolute;
bottom: -20px;
right: 0px;
}Panel terakhir tidak harus memiliki baris jadi kita hanya memberikan 0 width:
.cr-container label.cr-label-img-4:after{
width: 0px;
}Sekarang, kita dapat menyembunyikan input:
.cr-container input{
display: none;
}Setiap kali kita klik pada label, masing-masing input akan diperiksa otomatis. Sekarang kita dapat menargetkan masing-masing label menggunakan selecktor pemilih. Jadi, kita akan mengubah warna "selckor" label:
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
color: #68abc2;
}
Kita juga akan merubah warna dan kotak latar belakang (background) bayangan pseudo-elemen circle nya:
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
background: #fff;
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
Container untuk panel gambar akan menempati semua lebar (width) dan tepat diposisikan. Container ini akan digunakan untuk mengatur gambar background yang sedang dipilih. Kita perlu melakukan ini supaya gambar terlihat secara default. Jadi kita juga akan menambahkan beberapa properti untuk background:
.cr-bgimg{
width: 600px;
height: 400px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
background-repeat: no-repeat;
background-position: 0 0;
}Karena kita memiliki empat panel / gambar, satu panel akan memiliki lebar 150 piksel (600 dibagi dengan 4). Panel akan bergeser ke kiri dan kita akan menyembunyikan overflow karena kita tidak ingin melihat irisan keluar ketika kita geser:
.cr-bgimg div{
width: 150px;
height: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: -150px;
z-index: 2;
text-indent: -9000px;
}Sekarang, mari kita membuat background kontainer gambar dan potongan masing-masing gambar
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
background-image: url(../images/1.jpg);
}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(2){
background-image: url(../images/2.jpg);
}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(3){
background-image: url(../images/3.jpg);
}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(4){
background-image: url(../images/4.jpg);
}
Kita juga perlu memposisikan background dengan tepat untuk setiap potongan tergantung pada panel:
.cr-bgimg div:nth-child(1) span{
background-position: 0px 0px;
}
.cr-bgimg div:nth-child(2) span{
background-position: -150px 0px;
}
.cr-bgimg div:nth-child(3) span{
background-position: -300px 0px;
}
.cr-bgimg div:nth-child(4) span{
background-position: -450px 0px;
}Ketika kita klik pada label kita cukup geser semua potongan ke kanan:
.cr-container input:checked ~ .cr-bgimg div span{
animation: slideOut 0.6s ease-in-out;
}
@keyframes slideOut{
0%{
left: 0px;
}
100%{
left: 150px;
}
}Semua potongan kecuali background masing-masing gambar akan bergeser dari -150px ke 0px
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
{
transition: left 0.5s ease-in-out;
animation: none;
left: 0px;
z-index: 10;
}
Terakhir kita beri
span unutk elemen h3. H3 akan memiliki transisi opacity setelah kita mengklik masing-masing label / input. Opacity akan meningkat dari 0 ke 1:
.cr-titles h3{
position: absolute;
width: 100%;
text-align: center;
top: 50%;
z-index: 10000;
opacity: 0;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
transition: opacity 0.8s ease-in-out;
}
.cr-titles h3 span:nth-child(1){
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 70px;
display: block;
letter-spacing: 7px;
}
.cr-titles h3 span:nth-child(2){
letter-spacing: 0px;
display: block;
background: rgba(104,171,194,0.9);
font-size: 14px;
padding: 10px;
font-style: italic;
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),
.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),
.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),
.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){
opacity: 1;
}Jika sobat tidak ingin menampilkan label pada perangkat mobile sobat bisa menggunakan Media query, Misalnya,:
@media screen and (max-width: 768px) {
.cr-container input{
display: inline;
width: 24%;
margin-top: 350px;
z-index: 1000;
position: relative;
}
.cr-container label{
display: none;
}
}Ini hanya solusi dan mungkin lebih baik untuk melihat demo, apakah label didukung.
Mungkin hanya itu saja yang bisa saya bagikan malam ini setelah bermimpi =D! Ada banyak kemungkinan animasi yang bisa dilakukan di sini. Check out demo untuk melihat lebih banyak.
Sekian tutorial mengenai Sliding Image Panels with CSS3 ini. Saya harap sobat menyukai tutorial ini dan menemukan inspirasi!
