Dalam tutorial ini kita akan membuat jQuery image slider with three panels and 3D look. Idenya adalah untuk memiliki panel utama dan dua panel lateral yang yang sedikit diputar dalam ruang 3D. Bila menavigasi, kita akan melihat masing-masing gambar berikutnya di setiap panel. Kita akan menggunakan CSS 3D Mentransformasi dengan perspektif dan CSS Transisi.
Langsung saja menuju ke TKP
Markup HTML
Struktur awal yang akan kita buat akan terdiri dari sebuah divisi dengan angka. Setiap angka akan berisi gambar dan figcaption dengan judul dan keterangan untuk gambar:
<div class="fs-slider" id="fs-slider">
<figure>
<img src="images/1.jpg" alt="image01" />
<figcaption>
<h3>Eloquence</h3>
<p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
</figcaption>
</figure>
<figure>
<img src="images/2.jpg" alt="image02" />
<figcaption>
<h3>Quintessential</h3>
<p>Cardigan craft beer mixtape, skateboard forage fixie truffaut messenger bag. </p>
</figcaption>
</figure>
<!-- ... -->
</div>
Kita akan memberi jQuery plugin untuk mengubah struktur yang akan menjadi satu, berikut ini source HTML:
<section class="fs-container">
<div class="fs-wrapper">
<div class="fs-slider" id="fs-slider">
<div class="fs-block">
<figure style="display: block; ">
<img src="images/1.jpg" alt="image01" />
<figcaption>
<h3>Eloquence</h3>
<p>American apparel flexitarian put a bird on it, mixtape typewriter irony aesthetic. </p>
</figcaption>
</figure>
</div><!-- /fs-block -->
<div class="fs-block">
<!-- ... -->
</div>
<!-- ... -->
</div><!-- /fs-slider -->
<nav class="fs-navigation">
<span>Previous</span>
<span>Next</span>
</nav>
</div><!-- /fs-wrapper -->
</section><!-- /fs-container -->
Setiap angka akan dibungkus ke dalam wrapper dengan class fs-blok dan kita akan menambahkan navigasi untuk semuanya.
CSS
Karena kita ingin slider gambar menjadi responsif, kami akan memberikan persentase lebar. Tapi kita juga akan menentukan lebar minimal dan maksimal sehingga tidak menekan terlalu banyak atau tumbuh di luar proporsi atau melibihi tag div tsb. Kita akan menambahkan beberapa posisi ke samping karena blok kita akan diposisikan menggunakan CSS (semua gambar akan berada di tengah) dan yang tidak akan mempengaruhi lebar dari elemen:
.fs-container {
margin: 20px auto 50px auto;
position: relative;
width: 40%;
padding: 0 15%;
max-width: 700px;
min-width: 220px;
height: 500px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.fs-container:before {
content: '';
position: absolute;
bottom: -40px;
background: transparent url(../images/shadow.png) no-repeat center center;
height: 90px;
width: 90%;
left: 5%;
opacity: 0.8;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}
.fs-wrapper {
width: 100%;
height: 100%;
position: relative;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.fs-slider{
width: 100%;
height: 100%;
position: absolute;
display: none;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
}
.fs-block {
margin: 0;
position: absolute;
width: 70%;
height: 100%;
left: 15%;
pointer-events: auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.fs-block:nth-child(1) {
-webkit-transform-origin: top right;
-webkit-transform: translateX(-100%) rotateY(-35deg);
-moz-transform-origin: top right;
-moz-transform: translateX(-100%) rotateY(-35deg);
-o-transform-origin: top right;
-o-transform: translateX(-100%) rotateY(-35deg);
-ms-transform-origin: top right;
-ms-transform: translate(-100%);
transform-origin: top right;
transform: translateX(-100%) rotateY(-35deg);
}
.no-touch .fs-block:nth-child(1):hover {
-webkit-transform: translateX(-100%) rotateY(-30deg);
-o-transform: translateX(-100%) rotateY(-30deg);
transform: translateX(-100%) rotateY(-30deg);
}
.fs-block:nth-child(2) {
z-index: 100;
}
.fs-block:nth-child(3) {
-webkit-transform-origin: top left;
-webkit-transform: translateX(100%) rotateY(35deg);
-moz-transform-origin: top left;
-moz-transform: translateX(100%) rotateY(35deg);
-o-transform-origin: top left;
-o-transform: translateX(100%) rotateY(35deg);
-ms-transform-origin: top left;
-ms-transform: translate(100%);
transform-origin: top left;
transform: translateX(100%) rotateY(35deg);
}
.no-touch .fs-block:nth-child(3):hover {
-webkit-transform: translateX(100%) rotateY(30deg);
-o-transform: translateX(100%) rotateY(30deg);
transform: translateX(100%) rotateY(30deg);
}
.fs-block:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
pointer-events: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-left: 1px solid rgba(119,119,119,1);
border-right: 1px solid rgba(119,119,119,1);
left: -1px;
}
/* Borders are only needed if we have the 3d look */
.no-csstransforms3d .fs-block:after {
border: none;
}
.fs-block:nth-child(1):after {
background: -moz-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.2)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.2) 100%);
}
.fs-block:nth-child(2):after {
opacity: 0.8;
background: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.12) 21%, rgba(0,0,0,0.03) 31%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.03) 70%, rgba(0,0,0,0.12) 81%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(21%,rgba(0,0,0,0.12)), color-stop(31%,rgba(0,0,0,0.03)), color-stop(50%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,0.03)), color-stop(81%,rgba(0,0,0,0.12)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.12) 21%,rgba(0,0,0,0.03) 31%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.03) 70%,rgba(0,0,0,0.12) 81%,rgba(0,0,0,0.5) 100%);
}
.fs-block:nth-child(3):after {
background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.65) 100%);
}
.fs-block figure {
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.fs-block figure:first-child{
z-index: 10;
}
.fs-block figure img {
position: absolute;
top: 0;
left: 0;
display: block;
}
.fs-block figcaption {
padding: 0 20px;
margin: 0;
position: absolute;
width: 100%;
top: 25%;
background: rgba(0,0,0,0.4);
overflow: hidden;
height: 0%;
opacity: 0;
text-align: center;
-webkit-transition: all 700ms cubic-bezier(0, 0, .15, 1);
-moz-transition: all 700ms cubic-bezier(0, 0, .15, 1);
-o-transition: all 700ms cubic-bezier(0, 0, .15, 1);
-ms-transition: all 700ms cubic-bezier(0, 0, .15, 1);
transition: all 700ms cubic-bezier(0, 0, .15, 1);
}
.fs-block figcaption.fs-transition {
height: 35%;
opacity: 1;
}
.fs-block figcaption h3 {
font-size: 40px;
line-height: 40px;
margin: 0;
padding: 20px 0;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
font-family: 'Prata', serif;
font-weight: normal;
}
.fs-block figcaption p {
color: #fff;
padding: 20px 0;
margin: 0;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-top: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.fs-navigation {
position: absolute;
z-index: 2000;
bottom: 10px;
right: 15%;
margin-right: 15px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fs-navigation span {
float: left;
width: 26px;
height: 26px;
border-radius: 4px;
text-indent: -90000px;
cursor: pointer;
opacity: 0.6;
margin-right: 3px;
background: rgba(0,0,0,0.4) url(../images/arrow.png) no-repeat 50% 50%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
pointer-events: auto;
}
.fs-navigation span:nth-child(2) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.fs-navigation span:hover{
opacity: 1;
}
/* Transitions */
.fs-block:nth-child(1) figure {
-webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
-moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
-o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
-ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;
}
.fs-block:nth-child(2) figure {
-webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
-moz-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
-o-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
-ms-transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;
}
.fs-block:nth-child(3) figure {
-webkit-transition: width 900ms cubic-bezier(0, 0, .15, 1);
-moz-transition: width 900ms cubic-bezier(0, 0, .15, 1);
-o-transition: width 900ms cubic-bezier(0, 0, .15, 1);
-ms-transition: width 900ms cubic-bezier(0, 0, .15, 1);
transition: width 900ms cubic-bezier(0, 0, .15, 1);
}
/* Media Queries */
@media screen and (max-width: 1024px) {
.fs-block figcaption h3 {
font-size: 26px;
}
}
@media screen and (max-width: 768px) {
.fs-block figcaption {
padding: 0 10px;
}
.fs-block figcaption h3 {
font-size: 16px;
padding: 10px 0;
}
.fs-block figcaption p {
font-size: 13px;
}
}Javascript
Pilihan Plugin kami hanya akan memiliki pengaturan autoplay. Seperti telah kita lihat sebelumnya, kita mengatur konfigurasi transisi dalam CSS.
$.ImgSlider.defaults = {
autoplay : false,
interval : 4000
};Kita akan mulai dengan preloading semua gambar, setelah itu kita akan menjalankan fungsi _init:
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.ImgSlider.defaults, options );
this.current = 0;
// https://github.com/twitter/bootstrap/issues/2870
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
};
this.transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
// the initial elements
this.$initElems = this.$el.children( 'figure' );
// total number of elements
this.initElemsCount = this.$initElems.length;
if( this.initElemsCount < 3 ) {
return false;
}
// build layout
this._layout();
// init events
this._initEvents();
// autoplay on
if( this.options.autoplay ) {
this._startSlideshow();
}
}
_layout : function() {
this.$initElems.wrapAll( '<div class="fs-temp">
</div>
' ).hide();
this.$initElems
.filter( ':lt(3)' )
.clone()
.show()
.prependTo( this.$el )
.wrap( '<div class="fs-block">
</div>
' );
this.$el
.wrap( '<section class="fs-container"></section>' )
.wrap( '<div class="fs-wrapper">
</div>
' );
this.$blocks = this.$el.children( 'div.fs-block' );
// cache the 3 main blocks
this.$blockL = this.$blocks.eq( 0 );
this.$blockC = this.$blocks.eq( 1 );
this.$blockR = this.$blocks.eq( 2 );
this.$blockC.find( 'figcaption' ).addClass( 'fs-transition' );
// all items
this.$temp = this.$el.find( 'div.fs-temp' );
// resize images
this._resizeBlocks();
// add navigation if needed
if( this.initElemsCount > 3 ) {
var $nav = $( '<nav class="fs-navigation">PreviousNext</nav>' ).appendTo( this.$el.parent() );
// next and previous
this.$navPrev = $nav.find( 'span:first' );
this.$navNext = $nav.find( 'span:last' );
this._initNavigationEvents();
}
}
_initNavigationEvents : function() {
var _self = this;
this.$navPrev.on( 'click.imgslider', function() {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay = false;
}
_self._navigate( 'left' );
} );
this.$navNext.on( 'click.imgslider', function() {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay = false;
}
_self._navigate( 'right' );
} );
}
_navigate : function( dir ) {
if( this.isAnimating === true ) {
return false;
}
this.isAnimating = true;
var _self = this,
$items = this.$temp.children(),
LIndex, CIndex, RIndex;
this.$blocks.find( 'figcaption' ).hide().css( 'transition', 'none' ).removeClass( 'fs-transition' );
if( dir === 'right' ) {
LIndex = this.current + 1;
CIndex = this.current + 2;
RIndex = this.current + 3;
if( LIndex >= this.initElemsCount ) {
LIndex -= this.initElemsCount
}
if( CIndex >= this.initElemsCount ) {
CIndex -= this.initElemsCount
}
}
else if( dir === 'left' ) {
LIndex = this.current - 1;
CIndex = this.current;
RIndex = this.current + 1;
if( LIndex < 0 ) {
LIndex = this.initElemsCount - 1
}
}
if( RIndex >= this.initElemsCount ) {
RIndex -= this.initElemsCount
}
var $elL = $items.eq( LIndex ).clone().show(),
$elC = $items.eq( CIndex ).clone().show(),
$elR = $items.eq( RIndex ).clone().show();
// resize images
$elL.children( 'img' ).css( this.$blockL.data( 'imgstyle' ) );
$elC.children( 'img' ).css( this.$blockC.data( 'imgstyle' ) );
$elR.children( 'img' ).css( this.$blockR.data( 'imgstyle' ) );
this.$blockL.append( $elL );
this.$blockC.append( $elC );
this.$blockR.append( $elR );
// now show new images
var $slides = this.$blocks.find( 'figure:first' ).css( 'width', '0%');
if( Modernizr.csstransitions ) {
$slides.on( this.transEndEventName, function( event ) {
var $this = $( this ),
blockIdx = $this.parent().index('');
_self._slideEnd( dir, blockIdx, $elC );
$this.off( _self.transEndEventName ).remove();
} );
}
else {
$slides.each( function() {
var $this = $( this ),
blockIdx = $this.parent().index('');
_self._slideEnd( dir, blockIdx, $elC );
} );
this._slideEnd();
}
}
_slideEnd : function( dir, blockIdx, $main ) {
if( blockIdx === 0 ) {
if( this.current === this.initElemsCount - 1 && dir === 'right' ) {
this.current = 0;
}
else if( this.current === 0 && dir === 'left' ) {
this.current = this.initElemsCount - 1;
}
else {
( dir === 'right' ) ? ++this.current : --this.current;
}
this.isAnimating = false;
}
else if( blockIdx === 1 ) {
$main.find( 'figcaption' ).addClass( 'fs-transition' );
}
}
_initEvents : function() {
var _self = this;
$window.on( 'debouncedresize.imgslider', function() {
_self._resizeBlocks();
} );
},
// resize the images
_resizeBlocks : function() {
var _self = this;
this.$blocks.each( function( i ) {
var $el = $( this ).children( 'figure' ),
$img = $el.children( 'img' ),
dim = _self._getImageDim( $img.attr( 'src' ), { width : $el.width(), height : $el.height() } );
// save the image dimentions
switch( i ) {
case 0 : _self.$blockL.data( 'imgstyle', dim ); break;
case 1 : _self.$blockC.data( 'imgstyle', dim ); break;
case 2 : _self.$blockR.data( 'imgstyle', dim ); break;
};
// apply style
$img.css( dim );
} );
}Dan itu saja artikel mengenai
jQuery image slider with three panels and 3D look! Saya harap Anda menikmati tutorial ini dan merasa berguna!
Jika ada pertanyaan kita bahas di form komentar di bawah..
Terima kasih!