Web Design Trails - Sulla scia del web design

Oggi completiamo lo slider in parallasse in puro CSS3, iniziato nel precedente tutorial. Nella prima parte abbiamo visto come realizzare lo scorrimento utilizzando la proprietà animation di CSS3. In questo articolo vedremo come gestire l’hover e spostare i testi in parallasse.

Interrompere l’animazione all’hover

Lo slider che abbiamo realizzato al momento ha un’animazione continua. Questo comportamento è stato deciso impostando a infinite la proprietà animation-iteration-count. Tuttavia è opportuno consentire all’utente di interrompere l’animazione per soffermarsi su un’immagine.

Per fare questo, il CSS3 ci mette a disposizione animation-play-state; tale proprietà può avere 2 valori: running e paused. Il primo indica che l’animazione è in esecuzione, il secondo ci permette di interromperla in qualunque momento. Quindi, per fermare lo scorrimento dello slider basta aggiungere:

.slider:hover section{
	animation-play-state: paused;
}

Con questa semplice regola siamo riusciti a interrompere l’animazione. Tuttavia si nota poco che lo slider è in pausa, quindi per rendere più evidente il cambio di stato nascondiamo i testi e aggiungiamo un indicatore in basso a destra.

Evidenziare la pausa dello slider

Per prima cosa all’hover nascondiamo titolo e descrizione:

.slider h3{
	/* regole per lo stile del titolo */
	transition: opacity 0.5s;
}

.slider p{
	/* regole per lo stile della descrizione */
	transition: opacity 0.5s;
}

/* Regole per il passaggio del mouse */
.slider:hover h3{
	opacity: 0;
}

.slider:hover p{
	opacity: 0;
}

Le prime due regole servono a impostare una transizione sull’opacità, mentre le ultime due la azzerano al passaggio del mouse.

Completiamo il tutto con l’aggiunta dei classici simboli play e pause che posizioniamo in basso a destra. Quindi, appena fuori dal div .slider (creato nella prima parte) aggiungiamo:

<div class="indicatore">By Web Design Trails</div>

Il testo all’interno del div non è importante in quanto verrà nascosto, mentre i simboli saranno inseriti come sfondo. Il CSS è il seguente:

.indicatore{
	background-image: url(images/play-pause.png);
	background-repeat: no-repeat;
	width: 25px;
	height: 20px;
	position: absolute;
	bottom: 57px;
	right: 90px;
	display: block;
	text-indent: -1000em;
	direction: ltr;
}

.slider:hover + .indicatore{
	background-position: -25px 0;
}

A questo punto abbiamo ottenuto l’effetto voluto: al passaggio del mouse l’animazione si ferma, i testi spariscono e i il simbolo di pausa viene mostrato in basso a destra. Ora resta solo l’animazione in parallasse dei testi.

Spostare i testi in parallasse

Come avrete già intuito, anche per i testi utilizzeremo delle animazioni keyframes. Ovviamente queste animazioni dovranno essere sincronizzate con lo scorrimento dello slider. La scorsa volta avevamo definito l’animazione in questo modo:

@keyframes slider-animation {
	0%      { left: 0; opacity: 1; }
	18.52%  { left: 0; opacity: 1; }
	
	22.22%  { left: -784px; opacity: 1; }
	40.74%  { left: -784px; opacity: 1; }
	
	44.44%  { left: -1568px; opacity: 1; }
	62.96%  { left: -1568px; opacity: 1; }
	
	66.66%  { left: -2352px; opacity: 1; }
	85.18%  { left: -2352px; opacity: 1;}
	
	92.58% { left: -2352px; opacity: 0; }
	93%    { left: 0; opacity: 0; }
	100% { left: 0; opacity: 1; }
}

Come abbiamo visto, la prima immagine è visibile per 5 secondi, cioè fra 0% e 18.52%; la transizione fra la prima e la seconda si conclude al 22.22%.
All’interno di questo intervallo (0% – 22.22%) dobbiamo animare titolo e descrizione.

Iniziamo dal titolo; per prima cosa modifichiamo la sua posizione, per fare in modo che il testo scenda da sopra l’immagine:

.primo-pannello h3{
	/* abbiamo modificato il valore del top */
	top: -100px;
	left: 45px;
	width: 315px;

	animation: animazione-primo-pannello-h3 27s infinite;
}

Nella regola abbiamo già associato all’h3 l’animazione, che è definita da questa @keyframes:

/* Primo pannello */
@keyframes animazione-primo-pannello-h3{
	0%     { top: -100px; }
	5%     { top: 25px; left: 45px;   }
	17.50% { top: 25px; left: 45px;   }
	22.22% { top: 25px; left: -315px; }
	100%   { top -100px;  }
}

Il titolo scende dall’alto fra 0% e 5% cioè in circa 1,5 secondi e inizia l’animazione di uscita verso sinistra a 17.50%, cioè poco prima che inizi la transizione fra la prima e la seconda immagine. In questo modo lo spostamento del titolo avviene contemporaneamente allo scorrimento dello slider. Al 100% il testo torna nella posizione originale, in modo che l’animazione si ripeta correttamente. Procediamo allo stesso modo per la descrizione:

.primo-pannello p{
	width: 210px;
	top: 170px;
	/* abbiamo modificato il valore del left*/
	left: -220px;
	
	animation: animazione-primo-pannello-p 27s infinite;
}

@keyframes animazione-primo-pannello-p{
	0%     { left: -200px; }
	7%     { left: 96px;   }
	18%    { left: 96px;   }
	22.22% { left: 800px;  }
	100%   { left: -220px  }
}

In questo caso l’animazione fa entrare il paragrafo da sinistra e lo fa uscire sul lato destro.

La stessa teoria va ora applicata anche ai titoli e alle descrizioni delle altre immagini, facendo però attenzione a mantenere il sincronismo tra lo spostamento dei testi e lo scorrimento delle immagini.

Conclusioni

Bene bene bene, lo slider a questo punto è completo. Per semplificare il tutorial ho previsto solo lo spostamento dei testi, tuttavia per un vero effetto in parallasse sarebbe opportuno avere un maggior numero di strati, ad esempio suddividendo le immagini in più livelli e facendoli scorrere uno sopra l’altro.

Uno degli svantaggi di questo approccio è sicuramente la necessità di scrivere numerose animazioni; alla lunga, infatti, risulterà difficile gestirle e tenerle sincronizzate.

Infine, è importante anche considerare che nonostante sia molto interessante poter realizzare uno slider senza una riga di Javascript, dovremo comunque ricorrere a Modernizr per prevedere un meccanisco di graceful degradation, per i browser che non supportano animation.