Sebenarnya , Ada banyak sekali Sliding Panel yang disediakan di setiap Blog - Blog di segala penjuru DUNIA.Tapi saya cuman ingin membuat postingan yang lebih ISTIMEWA,
Kata teman saya : Hah ? ISTIMEWA ? kaya Chibi ( CHERY BELLE ) dong ?
Kata Saya : Haha .. Bukan loh , tapi kali ini saya akan membuatnya dengan cara saya sendiri. hihihi
Tapi Sebelum itu kita pahami Dulu yuk Sliding Panel - Yang disebut Image Sliding Panels sebenarnya cara lain untuk menciptakan slideshow dengan berbagai efek ditambahkan dan teks yang dikembangkan oleh codrops dan akhir menggunakan CSS3.
Mungkin Akan Lebih Menarik Bila ada beberapa demo gambar. contoh : demo1,demo2,demo3,demo4 dalam satu Struktur gambar yang sama. Hmm, seperti Slider deh cara gampangnya !
Untuk kode CSS nya - Bagi Yang Newbie Silahkan Taruh Kode Ini
Diatas KODE ]]></b:skin>
<style>.cr-container {border: 10px solid #FFF;height: 400px;margin: 0 auto;overflow: hidden;position: relative;width: 600px;} .cr-container br {display:none;} .cr-container label {color: #98541C;cursor: pointer;float: left;font-size: 30px;height: 32px;line-height:30px;margin-top: 350px;position: relative;text-align: center;width: 150px;z-index: 1000;} .cr-container label:before {background: rgba(255, 255, 255, 0.7);border-radius: 50%;box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);content: "";height: 32px;left: 50%;margin-left: -16px;position: absolute;width: 32px;z-index: -1;} .cr-container label:after{ background: -moz-linear-gradient(#FFF,#000,#FFF); background: -webkit-linear-gradient(#FFF,#000,#FFF); background: -o-linear-linear-gradient(#FFF,#000,#FFF); background: -ms-linear-linear-gradient(#FFF,#000,#FFF); background: linear--linear-gradient(#FFF,#000,#FFF); bottom: -20px; content: ''; height: 400px; position: absolute; right: 0px; width: 1px;} .cr-container label.cr-label-img-4:after{ width: 0px;} .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: #000;} .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: 0 0 0 4px rgba(0,0,0, 0.5);} .cr-container input{display: none;} .cr-bgimg {width: 600px;height: 400px;position: absolute;left: 0px;top: 0px;z-index: 1;background-repeat: no-repeat;background-position: 0 0;} .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;} .cr-bgimg div:nth-child(odd) span {left: -150px;}
.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(1) { background-image: url(URL-GAMBAR1);}
.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(2){ background-image: url(URL-GAMBAR2);}
.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(3){ background-image: url(URL-GAMBAR3);}
.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(4){ background-image: url(URL-GAMBAR4);}
.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;} .cr-container input:checked ~ .cr-bgimg div span{ -webkit-animation: slideOutRight 0.6s ease-in-out; -moz-animation: slideOutRight 0.6s ease-in-out; -o-animation: slideOutRight 0.6s ease-in-out; -ms-animation: slideOutRight 0.6s ease-in-out; animation: slideOutRight 0.6s ease-in-out;} @-webkit-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-moz-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-o-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @-ms-keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} @keyframes slideOutRight { 0%{ left: 0px; } 100%{ left: 150px; }} .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span { -webkit-animation: slideOutLeft 0.6s ease-in-out; -moz-animation: slideOutLeft 0.6s ease-in-out; -o-animation: slideOutLeft 0.6s ease-in-out; -ms-animation: slideOutLeft 0.6s ease-in-out; animation: slideOutLeft 0.6s ease-in-out;} @-webkit-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-moz-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-o-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @-ms-keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} @keyframes slideOutLeft { 0%{ left: 0px; } 100%{ left: -150px; }} .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) {-webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; -ms-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; left: 0px; z-index: 10;} .cr-titles h3 {font-weight: normal;} .cr-titles h3 span { z-index: 10000; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%;} .cr-titles h3 span.big {color: #FFF;font-family: Helvetica;font-size: 60px;letter-spacing: -2px;text-shadow: 1px 2px 1px #000; left: 0px;top: 230px; -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out, -o-transform 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out, -ms-transform 0.8s ease-in-out; transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;} .cr-titles h3 span.small {background: rgba(255, 255, 255, 0.7);color: #000;font-family: Tahoma;font-size: 14px;letter-spacing: 0;margin-top: 100px;opacity: 0;padding: 5px 0;text-shadow: 1px 1px 1px #FFF; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out;} .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5);} .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){opacity: 1;}</style>
Dan Untuk Kode HTML nya :
<div class="cr-container">
<input checked="checked" class="cr-selector-img-1" id="select-img-1" name="radio-set-1" type="radio" /><label class="cr-label-img-1" for="select-img-1">1</label><input class="cr-selector-img-2" id="select-img-2" name="radio-set-1" type="radio" /><label class="cr-label-img-2" for="select-img-2">2</label><input class="cr-selector-img-3" id="select-img-3" name="radio-set-1" type="radio" /><label class="cr-label-img-3" for="select-img-3">3</label><input class="cr-selector-img-4" id="select-img-4" name="radio-set-1" type="radio" /><label class="cr-label-img-4" for="select-img-4">4</label>
<div class="clr">
</div>
<div class="cr-bgimg">
<div>
Slice 1 - Image 1Slice 1 - Image 2Slice 1 - Image 3Slice 1 - Image 4</div>
<div>
Slice 2 - Image 1Slice 2 - Image 2Slice 2 - Image 3Slice 2 - Image 4</div>
<div>
Slice 3 - Image 1Slice 3 - Image 2Slice 3 - Image 3Slice 3 - Image 4</div>
<div>
Slice 4 - Image 1Slice 4 - Image 2Slice 4 - Image 3Slice 4 - Image 4</div>
</div>
<div class="cr-titles">
<h3>
<span class="big" style="color: black; font-family: Georgia; letter-spacing: 2px; text-shadow: 2px 2px 2px #FFF;">JUDUL-1</span><span class="small">Keterangan Gambar</span>
</h3>
<h3>
<span class="big" style="color: black; font-family: Georgia; letter-spacing: 2px; text-shadow: 2px 2px 2px #FFF;">JUDUL-2</span><span class="small">Keterangan Gambar</span>
</h3>
<h3>
<span class="big" style="color: black; font-family: Georgia; letter-spacing: 2px; text-shadow: 2px 2px 2px #FFF;">JUDUL-3</span><span class="small">Keterangan Gambar</span>
</h3>
<h3>
<span class="big" style="color: black; font-family: Georgia; letter-spacing: 2px; text-shadow: 2px 2px 2px #FFF;">JUDUL-4</span><span class="small">Keterangan Gambar</span>
</h3>
</div>
</div>
#NB : Untuk Menghilangkan Tulisan - Tulisan Gak Jelas Di Backgroundnya Silahkan Hapus Kode Yang Berwarna Biru
Untuk Demonya Silahkan Kesini - DEMO -
Semoga Bermanfaat :)
