Oggi vediamo come applicare un effetto flip come quello visibile in questo sito
www.yourpersonalmood.com su un modulo di login. Chiaramente lo stesso effetto è applicabile anche ad un normale htmlbox o qualunque altro modulo sia in dotazione di
GiapCMS®. Lo scopo di questo articolo è dimostrare che le già notevoli possibilità operative di GiapCMS possono essere ampliate a piacimento semplicemente girovagando un pochino su internet e trovando il "trick" giusto. Nel nostro caso abbiamo attinto a piene mani dal blog di
Simon Lockyer che tra tutti è stato quello che più ha curato l'aspetto "cross-browser" e la retrocompatibilità anche con browser più vecchi (ad esempio funziona anche con IE8).
L'effetto flip viene realizzato grazie ad istruzioni presenti nella versione 3 del linguaggio Css e tipicamente quella indicata come "trasform", che richiede la presenza di una div ".front" (quella che si vede di default) e di una div ".back", che verrà visualizzata solo al momento del mouse-over.
Il passaggio migliorativo della soluzione escogitata da Simon, è quella legata all'abbinamento con la libreira jQuery che gestirà l'evento "hover", libreria che già gestisce le nuove interfacce "touch", come quelle di tablet e smartphone, sia Android che iOS e soprattutto assicura la retrocompatibilità con i browser non css3 compatibili.
Step 1 - Creazione oggetto in pagina
Iniziamo con l'aggiungere un modulo di login alla pagina, scegliendone il desiderato template dal manager dei template ed assegnamogli un modello ed il corrispondente stile, in modo che gli venga associata una classe css (nel nostro caso ".Login-out1"). Quindi formattiamo il contenuto "Html Login" del modulo con il seguente codice html:
<div id="f1_container">
<div class="front face"></div>
<div class="back face"><input name="£formlogin_hid£" id="£formlogin_hid£" type="hidden" /> <input name="£formlogin_user£" class="comando_return box" id="£formlogin_user£" type="text" /> <input name="£formlogin_password£" class="comando_return box" id="£formlogin_password£" type="password" /> <input name="£formlogin_submit£" class="pulsante_login pulsante" id="£formlogin_submit£" onclick="javascript:presetPostback('£formlogin_hid£')" type="submit" value="Entra >>" /> </div>
</div>
dove riconosciamo la div contenitore ".f1_container" e le div che effettueranno l'effetto flip: .front e .back
L'idea è quella di aggiungere da codice css una immagine alla div ".front" e la stessa opportunamente ridotta di intensità da mettere come sfondo della div ".back", in modo che quando si instauri l'effetto flip, dia l'impressione che siano semplicemente comparsi i comandi di input sopra l'immagine precedente e per questo l'abbiano un pochino oscurata. Ma questo è un esercizio di creatività i cui sviluppi lascio volentieri a ciascuno di voi.
Step 2 - Aggiunta azione javascript
Aggiungiamo quindi l'azione javascript responsabile di intercettare l'evento hover (con declinazioni "touch" come dicevamo poc'anzi) e per questo sfruttiamo appieno la libreria jQuery incorporata in GiapCMS, assegnando il seguente codice all'evento "Page Load" del modulo in questione:
$('#f1_container').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
Questo breve codice ha l'unico scopo di aggiungere/rimuovere la classe "flip" alla div "f1_container", in modo che possa entrare in azione il codice css che abbineremo a tale selettore (".flip").
Step 3 - Aggiungiamo il codice css3
Non resta che aggiungere il codice css3 per completare l'opera, che avremo cura di inserire direttamente all'interno del codice "html login", in modo da evitare qualsivoglia troncamento dovuto ad istruzioni non riconoscibili da parte dello
Style Editor.
<style type="text/css">
.Login-out1 #f1_container
{
perspective: 600;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.Login-out1 .front
{
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.Login-out1 .flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.Login-out1 .back
{
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.Login-out1 .flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
</style>
Quello sopra riportato è preso pari-pari dal codice messo gentilmente a disposizione dal blog di
Simon Lockyer con gli opportuni adattamenti ai nostri selettori. Noterete la presenza dell'istruzione "
transform: rotateY(180deg)" (nelle declinazioni dei vari motori presenti nei browser moderni) che provoca proprio la rotazione di 180° lungo l'asse Y della scheda ".front", visualizzando di fatto la scheda ".back".
Al normale codice css viene poi demandato l'onere di visualizzare le giuste immagini di sfondo, attraverso i selettori ".front" e ".back", oltre alle dimensioni da dare alle schede attraverso il selettore ".face".
Un esempio operativo di questo codice potete trovarlo sul sito
yourpersonalmood.com
Buon divertimento con GiapCMS.