Effetto Slide con due immagini per il prima e dopo di make-up o di modifiche grafiche.

Come installare l'effetto per comparare due immagini visualizzandole una accanto all'altra con un cursore per mostrare le differenze.

Siete dei grafici che si occupano di migliorare le foto dei volti? Siete appassionate di make-up e siete soddisfatte del risultato ottenuto da un particolare trucco? Avete scattato due foto a distanza di tempo e volete mostrare le differenze sopravvenute in modo evidente?

Tutte queste esigenze o altre simili a queste presuppongono di comparare due immagini del prima e del dopo il make-up o del prima e del dopo delle modifiche alla foto fatte con Photoshop o Gimp. In rete ci sono diversi codici per mostrare queste foto una sotto all'altra e per visualizzarle insieme con l'ausilio di un cursore. Per rendere chiaro il tipo di effetto ecco una immagine animata che mostra come agendo con il mouse sul triangolo bianco posizionato in basso si possa passare dal prima al dopo e viceversa.

Vediamo come inserire nel modello i CSS di questo effetto che non ha bisogno di javascript e che quindi non appesantirà il caricamento della pagina. Dopo aver salvato il template si va su Modello > Modifica HTML, si clicca intorno alla 13-esima riga sulla freccetta nera a sinistra della sezione <b:skin> , si cerca con Ctrl+F la riga ]]></b:skin> e, subito sopra, si incolla questo codice

.slider-photo {
position:relative;
display: inline-block;
line-height: 0;
}
.slider-photo > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
.slider-photo > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 20px; height: 20px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
.slider-photo img {
user-select: none;
max-width: 560px;
}

Si salva il modello. I parametri colorati di rosso sono quelli che si possono personalizzare:

1. width: 50px; è la porzione della immagine sottostante che viene visualizzata all'inizio
2. width: 20px; height: 20px; sono le dimensioni del triangolo bianco che indica il cursore
3. max-width: 560px; è la larghezza delle immagini.

Per applicare questo effetto occorrono due immagini da comparare ovviamente delle stesse dimensioni. Per brevità le chiameremo immagine-before e immagine-after che dovranno essere caricate su Picasa e di cui vanno ottenuti i link diretti. Quando in un post vogliamo inserire questo effetto basterà incollare un codice con questa struttura di base:

<div align='center'>
<div class="slider-photo">
<div>
<img src="URL_IMMAGINE-AFTER" /></div>
<img src="URL_IMMAGINE-BEFORE" />
</div>
</div>

In questo modo sarà visualizzata all'inizio l'immagine-before quindi con lo scorrimento vedremo l'immagine-after. Si può anche decidere di cambiare l'ordinamento e di mostrare all'inizio l'immagine-after. La larghezza width: 50px; è la porzione della immagine sottostante sempre visibile e rappresenta anche la parte della prima immagine che rimarrà sempre nascosta.

COME INSERIRE TUTTO IL CODICE IN UN POST

Si può anche evitare di modificare il modello e quindi inserire tutto il codice in un post. Questa opzione è preferibile se si decide di usare questo effetto solo una o due volte e non in modo continuativo. Per far questo bisogna andare su HTML accanto a Scrivi, inserire all'inizio del primo codice il tag <style> e alla sua fine il tag </style> quindi incollarlo insieme al secondo codice nel punto del post in cui visualizzare l'effetto come ho del resto fatto anch'io per la demo seguente.

Con Internet Explorer non si può far scorrere il cursore ma per fortuna ora con Windows 10 quel browser ha i giorni contati.