Ciao a tutti ragazzi,
ho bisogno del vostro prezioso aiuto... vorrei riuscire ad animare delle section in stile slide, il tutto con l'ausilio del solo CSS (niente JS, almeno per le animazioni).
In questi ultimi giorni, avendo un po di tempo libero, sto cercando di imparare qualcosa sulle animazioni in CSS3. Ne mastico parecchio di CSS, ci lavoro da parecchi anni ma l'unico argomento che ho sempre rimandato, per motivi di tempo e carente utilizzo, sono le animazioni.
Ma veniamo all'obiettivo prefissatomi:
Immaginatevi di avere una scheda di login al centro dello schermo, l'utente inserisce le credenziali, viene autenticato, la scheda di login subisce un leggero ZoomOut per poi spostarsi e uscire a destra dello schermo. Nello stesso momento, una seconda scheda (quella dell'area riservata) entra dalla sinistra, si posiziona al centro dello schermo e subisce un leggero ZoomIn.
Ovviamente il tutto è simulativo. Per rendere l'idea ho preparato una semplice simulazione che potete trovare qui.
Al momento sono riuscito a far uscire la section di login ma non ho idea di come far entrare la seconda...
Nella simulazione ho preparato due schede (utilizzando delle section, entrambe in posizione assoluta), la prima è visibile e contiene un button. Cliccando sul button viene assegnata, alla section di login, la classe CSS contenente l'animazione che la fa uscire alla destra dello schermo (come descritto precedentemente). La seconda, invece, dovrebbe essere quella nascosta, pronta ad entrare dalla sinistra in concomitanza con l'uscita della prima.
Ci sto sbattendo la testa da qualche ora ma nada... Se poteste darmi una mano, ve ne sarei grato
Rispondi quotando