-
.Slideshow a scorrimento automatico
Elegante galleria di testo e/o immagini con effetto a scorrimento automatico
[ANTEPRIMA]
Grazie a questa guida potrete realizzare una elegante galleria di testo e/o immagini con effetto a scorrimento, ottenuto cliccando gli appositi label presenti alla base della galleria stessa. Opzionalmente, potete inserire un piccolo script (creato da bored) per automatizzare lo scorrimento. Lo script terrà memoria di tutte le vostre interazioni con i pannelli (ad esempio, quando cliccate un label, lo script cesserà di funzionare, e solo dopo un determinato periodo di inattività riprenderà a funzionare dal pannello da voi selezionato).
Installazione
Per l'installazione potete usufruire del comodo GENERATORE, realizzato dal nostro bored.
Il codice che viene generato comprende già lo script per lo scorrimento automatico. Qualora non desideriate lo scorrimento, una volta incollato il codice HTML rimuovete questo:SPOILER (clicca per visualizzare)CODICE<script type="text/javascript">
//SLIDESHOW A SCORRIMENTO AUTOMATICO
//by bored - http://ffmagazine.forumfree.it/?t=65226584
var slideJRadio = document.getElementById('slideshow').querySelectorAll('input[type="radio"]');
var eSlide = 1;
var slideJTime;
function setSlideTime(){
slideJTime = window.setInterval(function(){
if(eSlide === slideJRadio.length){
eSlide = 0;
}
slideJRadio[eSlide].checked = true;
eSlide++;
}, 4000);
}
setSlideTime();
document.getElementById('slideshow').onmouseover = function(){
window.clearInterval(slideJTime);
}
document.getElementById('slideshow').onmouseout = setSlideTime;
for(var i = 0; i < slideJRadio.length; i++){
slideJRadio[i].onclick=function(){
eSlide = this.id.match(/[0-9]+/) - 1;
}
}
</script>
Per tutti coloro che non volessero usufruire del generatore, inserisco sotto spoiler i codici e le procedure da seguire per modificare lo slideshow e aggiungere nuovi pannelli:SPOILER (clicca per visualizzare)In Colori e Stili inserite:CODICE/* SLIDESHOW A SCORRIMENTO AUTOMATICO - http://ffmagazine.forumfree.it/?t=65226584 */
#slideshow {width: 580px; padding: 10px; margin: 10px auto} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #EEE; padding: 10px; border: 3px solid #CCC; border-radius: 5px}
.slide_content {position: relative; width: 500%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}
#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}
.pannello {width: 20%; float: left}
#active {margin-top: 5px}
#active label {display: inline-block; width: 13px; height: 13px; border-radius: 10px; background: #CCC; border: 2px solid #FFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 5px}
#active label:hover {background: #AAA}
#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4) {background: #5690AD}
In Codice HTML --> Dove volete che appaia, inserite:CODICE<div id="slideshow">
<input checked="checked" type="radio" name="pan" id="pan1"> </input>
<input type="radio" name="pan" id="pan2"> </input>
<input type="radio" name="pan" id="pan3"> </input>
<input type="radio" name="pan" id="pan4"> </input>
<div id="slides">
<div id="mask">
<div class="slide_content">
<div class="pannello" id="p1"> <!-- Pannello 1 -->
CONTENUTO PANNELLO 1
</div>
<div class="pannello" id="p2"> <!-- Pannello 2 -->
CONTENUTO PANNELLO 2
</div>
<div class="pannello" id="p3"> <!-- Pannello 3 -->
CONTENUTO PANNELLO 3
</div>
<div class="pannello" id="p4"> <!-- Pannello 4 -->
CONTENUTO PANNELLO 4
</div>
</div></div></div>
<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
</div>
</div>
Come aggiungere ulteriori pannelli
In primo luogo sarà necessario agire sul codice HTML. Aggiungetedopo tutti gli INPUT, avendo cura di sostituire il numero progressivo del pannello (in questo caso, pan4 andrà sostituito con pan5, poichè stiamo inserendo un 5° pannello).CODICE<input type="radio" name="pan" id="pan4"> </input>
Aggiungiamo poi, dopo i DIV dei pannelli, questo ulteriore blocco:avendo cura, anche qui, di rinominare Pannello 4 in Pannello 5, e p4 in p5.CODICE<div class="pannello" id="p4"> <!-- Pannello 4 -->
CONTENUTO PANNELLO 4
</div>
Infine, aggiungetedopo i LABEL, rinominando anche qui pan4 in pan5.CODICE<label for="pan4"></label>
Se avete eseguito tutto correttamente, il vostro codice HTML sarà:
[SPOILER]CODICE<div id="slideshow">
<input checked="checked" type="radio" name="pan" id="pan1"> </input>
<input type="radio" name="pan" id="pan2"> </input>
<input type="radio" name="pan" id="pan3"> </input>
<input type="radio" name="pan" id="pan4"> </input>
<input type="radio" name="pan" id="pan5"> </input>
<div id="slides">
<div id="mask">
<div class="slide_content">
<div class="pannello" id="p1"> <!-- Pannello 1 -->
CONTENUTO PANNELLO 1
</div>
<div class="pannello" id="p2"> <!-- Pannello 2 -->
CONTENUTO PANNELLO 2
</div>
<div class="pannello" id="p3"> <!-- Pannello 3 -->
CONTENUTO PANNELLO 3
</div>
<div class="pannello" id="p4"> <!-- Pannello 4 -->
CONTENUTO PANNELLO 4
</div>
<div class="pannello" id="p5"> <!-- Pannello 5 -->
CONTENUTO PANNELLO 5
</div>
</div></div></div>
<div id="active">
<label for="pan1"></label>
<label for="pan2"></label>
<label for="pan3"></label>
<label for="pan4"></label>
<label for="pan5"></label>
</div>
</div>
Occupiamoci adesso del codice CSS.
Anzitutto, dobbiamo ridimensionare la larghezza di .slide_content e di .pannelloCODICE.slide_content {width: 500%; ... }CODICE.pannello {width: 20%; ...}
Come spiegato in precedenza, la larghezza di .slide_content deve essere pari al numero di pannelli + 1, moltiplicato per 100. Dunque: 5 + 1 * 100 = 600. La larghezza di .pannello, invece, è 100 diviso il numero di pannelli +1; dunque: 100/(5+1)= 16.66%
Ora occorre tenere conto del nuovo pannello che abbiamo inserito, ed inserire dunque anche il corrispondente label (il pallino).
Dopo questo:CODICE#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}
Aggiungiamo questo:modificando il numero del pannello (pan4-->pan5) ed incrementando di -100 il margine. Dunque:CODICE#pan4:checked ~ #slides .slide_content {margin-left: -300%}CODICE#pan5:checked ~ #slides .slide_content {margin-left: -400%}
Per quanto riguarda il pallino, sarà sufficiente inserire, in questo punto:questa riga, opportunamente modificata (pan4-->pan5 e nth-child(4)-->nth-child(5):CODICE#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4) {background: #5690AD}ottenendo dunque:CODICE#pan5:checked ~ #active label:nth-child(5)CODICE#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4),
#pan5:checked ~ #active label:nth-child(5) {background: #5690AD}
Se avete eseguito correttamente tutte le modifiche, il vostro CSS sarà così modificato:CODICE#slideshow {width: 580px; padding: 10px; margin: 10px auto} #slideshow input {display: none}
#mask {width: 100%; overflow:hidden}
#slides {background: #EEE; padding: 10px; border: 3px solid #CCC; border-radius: 5px}
.slide_content {position: relative; width: 600%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}
#pan1:checked ~ #slides .slide_content {margin-left: 0}
#pan2:checked ~ #slides .slide_content {margin-left: -100%}
#pan3:checked ~ #slides .slide_content {margin-left: -200%}
#pan4:checked ~ #slides .slide_content {margin-left: -300%}
#pan5:checked ~ #slides .slide_content {margin-left: -400%}
.pannello {width: 16.66%; float: left}
#active {margin-top: 5px}
#active label {display: inline-block; width: 13px; height: 13px; border-radius: 10px; background: #CCC; border: 2px solid #FFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 5px}
#active label:hover {background: #AAA}
#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4),
#pan5:checked ~ #active label:nth-child(5) {background: #5690AD}
Di seguito, ecco la guida di cosa modificare del codice CSS.#slideshow {width: 580px; padding: 10px; margin: 10px auto}Consente di personalizzare lo stile della galleria.#slides {background: #EEE; padding: 10px; border: 3px solid #CCC; border-radius: 5px}Consente di personalizzare lo stile del riquadro che contiene i vari pannelli..slide_content {position: relative; width: 500%; -webkit-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -moz-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -ms-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); -o-transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000); transition: all 800ms cubic-bezier(0.670, 0.000, 0.170, 1.000)}Permette di regolare il tipo e la durata della transizione tra un pannello e l'altro (il mio consiglio è di utilizzare sempre animazioni cubic-bezier(), in quanto rendono meglio l'effetto). La larghezza (width: 500%) deve essere sempre pari al numero di pannelli più uno, tutto moltiplicato per 100 (in questo caso: n° pannelli (4) + 1 * 100 = 500%).pannello {width: 20%; float: left}Regola la dimensione dei vari pannelli. Il valore della larghezza deve essere pari a 100 diviso il numero di pannelli + 1. In questo caso: 100 / (4+1) = 20#active label {display: inline-block; width: 13px; height: 13px; border-radius: 10px; background: #CCC; border: 2px solid #FFF; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); margin: 5px}Consente di personalizzare lo stile dei label (i pallini alla base della galleria). background: #5690AD identifica il colore del pallino corrispondente al pannello attualmente visualizzato.
#active label:hover {background: #AAA}
#pan1:checked ~ #active label:nth-child(1),
#pan2:checked ~ #active label:nth-child(2),
#pan3:checked ~ #active label:nth-child(3),
#pan4:checked ~ #active label:nth-child(4) {background: #5690AD}
Informazioni
Il codice risulta compatibile con tutti i browser.
UPDATE 27.03.2013 E' stato realizzato un GENERATORE per semplificare l'aggiunta di nuovi pannelli
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):HTML<a href="http://ffmagazine.forumfree.it/?t=65226584">Slideshow a scorrimento automatico</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> e <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:HTML<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Slideshow a scorrimento automatico" href="http://ffmagazine.forumfree.it/?t=65226584"><b>Slideshow a scorrimento automatico</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> e <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>Slideshow a scorrimento automatico
Realizzata da El Gringo 89 e bored del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by °KiraKiller° - 3/7/2014, 16:42
.
[Script] Slideshow a scorrimento automatico |
Web
Fairy Tail