Coverflow javascript Css Slayt Galeri

Hjörtur Elvar Hilmarsson tarafından JavaScript ve Css3 kullanılarak hazırlanmış bir slayt galeri örneği. Css3 rotate ve translate nesnelerinden yararlanarak hazırladığı bu örnek modernizer kütüphanesi ile beraber çalışıyor. Modernizer dışında herhangi bir javascript kütüphanesi kullanılmamış. Hem klavye sağ-sol tuşları yardımıyla hemde mouseyi kullanarak resimler arası geçiş yapabilirsiniz. En ortada duran resim dümdüz görünüyor, sağ ve solda kalan resimler ise yan şekilde duruyor. Ayrıca resmin yansımasıda hemen altında görünüyor. İlk bakışta uzun bir resim gibi görünsede aslında alt kısmı resmin suda yansıması gibi görünüyor. Websitenize çok farklı bir görüntü kazandırabilecek bir örnek.

Download

Demo

Kullanım

Body etiketleri arasına eklemeniz gereken bölüm.

Css :

/*
* Layout
*/
html, body {
 position: relative;
 padding: 0;
 margin: 0;
 overflow: hidden;
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
 background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);
 height: 100%;
 width: 100%;
 text-align: center;
 font-family: sans-serif;
}
/*
* Coverflow
*/
#coverflow {
 height: 100%;
 width: 100%;
 -webkit-perspective: 600px;
}
#coverflow section {
 display: position;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 170px;
 height: 170px;
 margin-left: -90px;
 margin-top: -90px;
 background-color: white;
 background-size: 100%;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: all 300ms ease-in;
 -moz-transition: all 300ms ease-in;
 -ms-transition: all 300ms ease-in;
 -o-transition: all 300ms ease-in;
 transition: all 300ms ease-in;
 -webkit-box-reflect: below 0
 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(white)); 
}
/*
* Controls
*/
#controls {
 position: absolute;
 width: 100%;
 bottom: 10%;
 z-index: 1;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
 color: #999;
 font-size: 18px;
}
#controls a {
 color: white; 
 cursor: pointer;
}
#controls a:hover {
 color: 66FFFF;
}

Body etiketleri arasına eklemeniz gereken bölümler.

Html :

<div id="coverflow">
 <section data-cover="img/sahccbiy.jpg" ></section>
 <section data-cover="img/calvinharris.jpg" ></section>
 <section data-cover="img/beyonce.jpg" ></section>
 <section data-cover="img/adele.jpg" ></section>
 <section data-cover="img/mzi.jpg" ></section>
 <section data-cover="img/dcotnnwo.jpg" ></section>
 <section data-cover="img/rio.jpg" ></section>
 </div>
 <nav id="controls">
 <a id="prev">Left</a> & <a id="next">Right</a> 
 </nav>

Modernizr url aresi :

<script type="text/javascript" src="Modernizr.js"></script>

JavaScript :

<script type="text/javascript">
/**
* 
* CoverFlow using CSS3
* 
* @author: Hjörtur Elvar Hilmarsson
* 
**/
(function() {
 // Local variables
 var _index = 0,
 _coverflow = null,
 _prevLink = null,
 _nextLink = null,
 _albums = [],
 _transformName = Modernizr.prefixed('transform'),
 // Constants
 OFFSET = 70; // pixels
 ROTATION = 45; // degrees
 BASE_ZINDEX = 10; // 
 MAX_ZINDEX = 42; // 
 /**
 * Get selector from the dom
 **/
 function get( selector ) {
 return document.querySelector( selector );
 };
 /**
 * Renders the CoverFlow based on the current _index
 **/
 function render() {
 // loop through albums & transform positions
 for( var i = 0; i < _albums.length; i++ ) {
 // before 
 if( i < _index ) {
 _albums[i].style[_transformName] = "translateX( -"+ ( OFFSET * ( _index - i ) ) +"% ) rotateY( "+ ROTATION +"deg )";
 _albums[i].style.zIndex = BASE_ZINDEX + i; 
 } 
 // current
 if( i === _index ) {
 _albums[i].style[_transformName] = "rotateY( 0deg ) translateZ( 140px )";
 _albums[i].style.zIndex = MAX_ZINDEX; 
 } 
 // after
 if( i > _index ) {
 _albums[i].style[_transformName] = "translateX( "+ ( OFFSET * ( i - _index ) ) +"% ) rotateY( -"+ ROTATION +"deg )";
 _albums[i].style.zIndex = BASE_ZINDEX + ( _albums.length - i ); 
 } 
 }
 };
 /**
 * Flow to the right
 **/
 function flowRight() {
 // check if has albums 
 // on the right side
 if( _index ) {
 _index--;
 render();
 }
 };
 /**
 * Flow to the left
 **/
 function flowLeft() {
 // check if has albums 
 // on the left side
 if( _albums.length > ( _index + 1) ) {
 _index++;
 render();
 }
 };
 /**
 * Enable left & right keyboard events
 **/
 function keyDown( event ) {
 switch( event.keyCode ) {
 case 37: flowRight(); break; // left
 case 39: flowLeft(); break; // right
 }
 };
 /**
 * Register all events 
 **/
 function registerEvents() {
 _prevLink.addEventListener('click', flowRight, false);
 _nextLink.addEventListener('click', flowLeft, false);
 document.addEventListener('keydown', keyDown, false);
 };
 /**
 * Initalize
 **/
 function init() {
 // get albums & set index on the album in the middle
 _albums = Array.prototype.slice.call( document.querySelectorAll( 'section' ));
 _index = Math.floor( _albums.length / 2 );
 // get dom stuff
 _coverflow = get('#coverflow');
 _prevLink = get('#prev');
 _nextLink = get('#next');
 // display covers
 for( var i = 0; i < _albums.length; i++ ) {
 var url = _albums[i].getAttribute("data-cover");
 _albums[i].style.backgroundImage = "url("+ url +")";
 }
 // do important stuff
 registerEvents();
 render();
 };
 // go!
 init();
}());
</script>