Implementare uno Slider con rotazione 3D – Esistono sono molti modi per visualizzare slider o una galleria di immagini. In questo tutorial verrà mostrato come utilizzare uno stile a griglia con un particolare e suggestivo effetto di scorrimento a rotazione delle miniature. Questo effetto può essere implementato grazie all’utilizzo di codice CSS3 e jQuery.
L’effetto si attiva non appena l’utente cliccherà su uno dei link di paginazione delle immagini. Una volta cliccato, tutte le immagini subiranno una rotazione al termine della quale ognuna visualizzerà la nuova miniatura.
Potete guardare la demo a fine articolo per visualizzare l’implementazione dal vivo e scaricare i file contenti codici ed esempio.
Dunque, vediamo il codice di esempio da implementare.
Slider con rotazione 3D – Codice HTML
|
1 2 3 4 5 6 7 8 |
<div id="portfolio"></div> <ul id="portfolio-item"> <li><img src="images/dumptruck_teaser.jpeg" alt="Dump Truck"></li> <li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="Rrwooo"></li> <li><img src="images/dozer_teaser.jpeg" alt="Dozer"></li> <!-- to n image --> </ul> |
Slider con rotazione 3D – Codice CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
#portfolio-item { display: none; } #portfolio { margin: 2em 0 1em; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } #portfolio div { display: inline-block; position: relative; vertical-align: top; margin: 1em; width: 200px; height: 150px; box-shadow: 0px 0px 25px rgba(0,0,0,.3); } #portfolio div span { text-align: left; position: absolute; color: #fff; background: rgba(0,0,0,0.6); width: 90px; padding: 5px 15px 7px; z-index: 1; left: -10px; bottom: 10px; } .animated { -webkit-transition: .9s ease-out; -moz-transition: .9s ease-out; -ms-transition: .9s ease-out; -o-transition: .9s ease-out; transition: .9s ease-out; } .flipped-horizontal-right { -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg); } .flipped-horizontal-left { -webkit-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -o-transform: rotateY(-360deg); transform: rotateY(-360deg); } .flipped-vertical-top { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); } .flipped-vertical-bottom { -webkit-transform: rotateX(-360deg); -moz-transform: rotateX(-360deg); -ms-transform: rotateX(-360deg); -o-transform: rotateX(-360deg); transform: rotateX(-360deg); } |
Slider con rotazione 3D – Codice Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
$(document).ready(function() { //Initiliaze itemShow = 8; indexedItemShow = itemShow - 1 itemList = $('#portfolio-item'); itemWrapper = $('#portfolio'); rotation = ['flipped-vertical-bottom', 'flipped-vertical-top', 'flipped-horizontal-left', 'flipped-horizontal-right']; navigation = $('#navigation a'); //Populate items for( var i = 0; i < itemShow; i++ ) { itemImage = itemList.children('li:eq(' + i + ')').children('img'); itemSrc = itemImage.attr('src'); itemAlt = itemImage.attr('alt'); item = '<div style="background:url(' + itemSrc + ')"> <span>' + itemAlt + '</span></div>'; itemWrapper.append(item); } navigation.on('click', function(e) { e.preventDefault(); navigation.removeClass('selected'); $(this).addClass('selected'); page = $(this).attr('data-page'); for( var i = 0; i <= indexedItemShow; i++ ) { random = Math.floor( Math.random() * ( 3 - 0 + 1 ) ); animation = rotation[random]; item = itemWrapper.children('div:eq(' + i + ')'); item.addClass('animated ' + animation); window.setTimeout(function (index) { return function () { indexReal = (page == 1) ? index : (index + (page - 1)) ; itemHost = indexReal + (indexedItemShow * (page - 1)); itemImage = itemList.children('li:eq(' + itemHost + ')').children('img'); itemSrc = itemImage.attr('src'); itemAlt = itemImage.attr('alt'); itemCurrent = itemWrapper.children('div:eq(' + index + ')'); itemCurrent.css('background', 'url(' + itemSrc + ')'); itemCurrent.children('span').text(itemAlt); }; } (i), 500); item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() { $(this).removeClass(); }); } }); }); |
Bene, ora dovreste avere ottenuto il vostro slider di immagini con effetto di rotazione 3D.
Buon lavoro ed alla prossima risorsa!
Demo Download Info | Sito Web | Autore
pixolo ads
| Articolo pubblicato 4 anni fa nella categoria 
