Pubblicato il 14/08/15 - aggiornato il  | 1 commento :

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.


elsa

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.

effetto-slide-immagini-after-before

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.


1 commento :

  1. Non è il cursore quella che hai chiamato freccina bianca. Viene creata con i CSS si tratta di una figura geometrica. Il cursore lo vedi orizzontale con due frecce quando passi sopra alla freccia. La forma del cursore è data dalla riga
    cursor: ew-resize;
    Se lo vuoi cambiare puoi sostituire ew-resize con un altro attributo consultando questo post
    https://www.ideepercomputeredinternet.com/2015/01/personalizzare-mouse-css.html
    La freccia bianca è generata dalle righe seguenti:

    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);
    }

    dove con il 45% si angolo si crea appunto il triangolo al posto del quadrato di 20 pixel. Puoi personalizzare il tutto agendo su queste righe.
    Per esempio puoi mettere red al posto di white per avere la freccia rossa oppure #036 per averla di colore blu o usare un altro codice dei colori. Poi puoi sostituire i 20 pixel con 10 pixel per avere la freccia più piccola e modificare l'angolo, ecc...
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy