Web Design Trails - Sulla scia del web design

Non fatevi ingannare dall’immagine, oggi non parliamo di sport estremi, ma di come il CSS3 con le proprietà animation, transform e transition ci consentiranno di fare a meno di JavaScript, per realizzare gli effetti più comuni. In questo tutorial vedremo come realizzare uno slider utilizzando la proprietà animation, nella seconda parte aggiungeremo anche l’hover e un effetto di parallasse.

Come funziona la proprietà animation

Le animazioni sono una delle ultime novità del CSS3 e sono per ora compatibili con i brower Webkit e FireFox. Negli esempi di codice utilizzerò la sintassi standard, ma resta inteso che è necessario aggiungere i prefissi nel CSS finale.

Animare un elemento con il nuovo standard CSS è abbastanza semplice. Per prima cosa si definisce l’animazione utilizzando l’AT-Rule keyframes. Dopo di che, occorre stabilire il comportamento dell’animazione, specificando all’interno di keyframes la sequenza dei fotogrammi. Ad esempio, se volessimo spostare un quadrato sullo schermo, potremmo scrivere:

@keyframes animazione-quadrato {
	0%   { top: 50px;   left: 50px;  }
	25%  { top: 200px;  left: 200px; }
	50%  { top: 200px;  left: 50px;  }
	75%  { top: 50px;   left: 200px; }
	100% { top: 50px;   left: 50px;  }
}

Come possiamo vedere, ogni fotogramma è definito in percentuale e contiene una serie di regole CSS che decidono l’aspetto dell’elemento istante per istante. Ora non resta che utilizzare l’animazione, aggiungendo la proprietà animation al selettore dell’elemento che vogliamo spostare:

.quadrato{
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	top: 50px;
	left: 50px;
	animation: animazione-quadrato 10s infinite ease;
}

Oltre ad associare il nome che abbiamo definito prima, animation consente di definire la durata dell’animazione, il numero di volte che deve essere ripetuta e la funzione di temporizzazione, che sarà utilizzata per le transizioni da un fotogramma all’altro. Le possibilità di personalizzazione però non finiscono qui. Per una descrizione più dettagliata vi consiglio di leggere il tutorial di Smashing Magazine oppure la guida rapida di CSS-Tricks.

Slider in CSS3

Quello che vogliamo realizzare è un classico slider di contenuti: le fotografie scorreranno in senso orizzontale, i testi si muoverano a una velocità differente in modo da ottenere un effetto parallasse. Lo slider scorrerà in modo continuo e arrivato all’ultima fotografia, tornerà alla prima con una dissolvenza. Infine, posizionando il mouse sopra un’immagine, l’animazione si fermerà.

Detto questo scriviamo il nostro codice HTML:

<!-- Maschera -->
<div class="slider">

	<!-- Scorre dentro la maschera e contiene tutte le immagini -->
	<section>

		<!-- Contiene la prima immagine -->
		<article class="primo-pannello">
			<figure><img src="images/roller-jump.jpg" width="784" height="284" alt="jumping with rollerblade" /></figure>
			<h3>man with Rollerblade</h3>
			<p>Seeking the balance is a game for me</p>
		</article>

		<!-- Contiene la seconda immagine affiancata alla prima -->
		<article class="secondo-pannello">
			<figure><img src="images/ninja-roller.jpg" width="784" height="284" alt="a ninja on rollerblade" /></figure>
			<h3>Ninja with Rollerblade</h3>
			<p>Eight wheels are just enought to fly</p>
		</article>

		<!-- Altri pannelli article -->

	</section>
</div>
 

La section scorre all’interno del div .slider che funziona da maschera, ossia mostra solo quello che stabiliamo noi quando impostiamo le sue dimensioni. Lo scorrimento della section è ottenuto modificando di volta in volta la coordinata left. Questa variazione è solitamente ottenuta con uno script jQuery, ma in questo caso la realizzeremo sfruttando un’animazione CSS3.

Per capire meglio il funzionamento potete vedere l’immagine qui sotto:

Ora creiamo le regole fondamentali per il funzionamento dello slider. Il frammento di CSS è il seguente:

.slider{
	width: 784px;
	height: 284px;
	position: relative;
	overflow: hidden;
}

.slider section{
	width: 3136px;
	height: 284px;
	position: absolute;
}

.slider article{
	position: relative;
	float: left;
}

Come abbiamo detto il div .slider deve fare da maschera, per questo è necessario indicare le dimensioni esatte dell’immagine e nascondere l’overflow. La section che scorrerà all’interno di .slider ha una larghezza pari alla somma di tutti i pannelli (cioè i tag article) che contiene. I singoli article sono affiacanti in modo da ottenere uno scorrimento orizzontale.

Ora manca solo la nostra animazione. Per prima cosa definiamo i fotogrammi:

@keyframes slider-animation {
	/* Prima immagine */
	0%		{ left: 0; opacity: 1; }
	18.52%	{ left: 0; opacity: 1; }
	
	/* Passaggio alla seconda immagine */
	22.22%	{ left: -784px; opacity: 1; }
	40.74%	{ left: -784px; opacity: 1; }
	
	/* Passaggio alla terza immagine */
	44.44%	{ left: -1568px; opacity: 1; }
	62.96%	{ left: -1568px; opacity: 1; }
	
	/* Passaggio alla quarta immagine */
	66.66%	{ left: -2352px; opacity: 1; }
	85.18%	{ left: -2352px; opacity: 1;}
	
	/* Dissolvenza e ritorno alla prima immagine */
	92.58%	{ left: -2352px; opacity: 0; }
	93%		{ left: 0; opacity: 0; }
	100%	{ left: 0; opacity: 1; }
}

Le percentuali dei fotogrammi sono calcolate in modo che ogni immagine sia visibile per 5 secondi e la transizione fra un’immagine e l’altra duri 1 secondo. Inoltre per tornare alla prima immagine ho fatto una dissolvenza che dura 4 secondi.

Rimane solo da assegnare l’animazione alla section:

.slider section{
	width: 3136px;
	height: 284px;
	position: absolute;
	animation: slider-animation 27s infinite;
}

Conclusioni

Il nostro slider ora è funzionante, anche se non ancora completo.

Per realizzarlo ho scelto l’approccio più semplice, che ha lo svantaggio di costringerci a specificare la larghezza della section e quindi a doverla modificare ogni volta che si vuole aggiungere un’immagine. Per aggirare questo problema si può ricorrere al display inline-block al posto del float sugli article.

Nella seconda parte vedremo come fermare l’animazione all’hover e come spostare i testi in parallasse.