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.
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>