CSS: slideshow con animazioni CSS3
I CSS3 hanno introdotto, con le animazioni, il concetto di transizioni. Le transizioni CSS3 si possono applicare agli elementi di una pagina fornendo come parametri il tipo di animazione voluto e la sua durata. Non sorprende il fatto che molti valori usati nel tipo di transizioni sono gli stessi usati da molti plugin jQuery. Vogliamo Continue Reading »
I CSS3 hanno introdotto, con le animazioni, il concetto di transizioni. Le transizioni CSS3 si possono applicare agli elementi di una pagina fornendo come parametri il tipo di animazione voluto e la sua durata. Non sorprende il fatto che molti valori usati nel tipo di transizioni sono gli stessi usati da molti plugin jQuery. Vogliamo creare uno slideshow in cui i CSS gestiranno l’effetto associato a ciascun scorrimento delle slide.
jQuery gestirà solo il posizionamento delle slide, senza usare gli effetti del metodo animate(). Vediamo come fare.
Abbiamo la seguente marcatura:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="slideshow">
<div id="slideshow-wrapper">
<div class="slide intro">
<p>Slideshow</p>
</div>
<div class="slide">
<p>Slide 1</p>
</div>
<div class="slide">
<p>Slide 2</p>
</div>
<div class="slide">
<p>Slide 3</p>
</div>
</div>
</div>
<p id="controls">
<span id="slide-1">Slide 1</span>
<span id="slide-2">Slide 2</span>
<span id="slide-3">Slide 3</span>
</p> |
Associamo a questa struttura gli stili già visti molte altre volte per slideshow di questo tipo:
|
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 |
#controls {
width: 400px;
margin: 0 auto;
text-align: center;
}
#controls span {
margin-right:2em;
cursor:pointer;
color: #fff;
padding: 1em;
background: #333;
border-radius: 6px;
}
#slideshow {
width:400px;
height:300px;
overflow:hidden;
position:relative;
margin: 2em auto;
}
#slideshow-wrapper {
position:absolute;
left:0;
width:1600px;
height: 300px;
/* transizioni qui */
}
#slideshow-wrapper div.slide {
padding:0;
margin:0;
float:left;
width: 400px;
height: 300px;
background: #d34545;
color: #fff;
text-align: center;
line-height: 300px;
font-weight: bold;
font-size: 2em;
text-transform: uppercase;
}
#slideshow-wrapper div.intro {
background: #333;
}
div.slide p {
display: inline;
} |
Codice già visto, se non fosse che ora possiamo aggiungervi le seguenti dichiarazioni CSS3:
|
1 2 3 4 5 6 7 8 9 10 11 |
#slideshow-wrapper {
position:absolute;
left:0;
width:1600px;
height: 300px;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
-ms-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
} |
L’effetto che vogliamo ottenere è di tipo ease-in-out e dura un secondo (1.0s). Otterremo lo stesso effetto che usando il metodo animate() con un valore del plugin Easing.
jQuery si limita ad associare delle regole di stile su ciascun clic effettuato sui bottoni:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(function() {
var wrapper = $('#slideshow-wrapper', '#slideshow');
$('#slide-1').click(function() {
wrapper.css('left', -400);
});
$('#slide-2').click(function() {
wrapper.css('left', - 800);
});
$('#slide-3').click(function() {
wrapper.css('left', - 1200);
});
}); |
Al resto pensano i CSS3. Potete visionare l’esempio finale in questa pagina.
Nessun commento. Aggiungine uno!
I commenti sono chiusi.