Share
In questo tutorial creeremo un orologio a conchiglia animato ispirato agli anni '70. Usando il framework Mootools, ho provato a replicare l'azione di capovolgimento dei pad e renderla il più realistica possibile. Con il suo stile retrò, potrebbe essere una cosa davvero carina da aggiungere al tuo sito Web, quindi iniziamo!
L'orologio è composto da tre gruppi di immagini: ore, minuti e secondi, che sono divisi in una parte superiore e una parte inferiore in modo da ottenere l'effetto "capovolgere". L'animazione principale consiste nel ridurre l'altezza della parte superiore dal 100% allo 0%, quindi aumentare l'altezza della parte inferiore da 0% a 100% per ciascun gruppo in cui cambia una cifra. Ecco lo schema di base.
In primo luogo, dobbiamo creare le nostre immagini.
Seleziona lo "Strumento Ractangle arrotondato" (U), imposta il raggio su 10px e il colore su # 0a0a0a e crea un rettangolo di 126 px per 126 px, puoi modificare la dimensione in base alle tue esigenze, mantieni un numero pari. Ricalizza la forma andando su Livello> Rasterizza> Forma o Clic destro> Rasterizza livello. Ora vogliamo creare quel "gap" tra le due parti e rendere lo sfondo superiore un po 'più leggero. Posiziona una linea guida sulla metà orizzontale del nostro pad, quindi seleziona il riquadro fori (Ctrl + clic sull'icona del livello) e con lo strumento Selezione rettangolare (M) seleziona la metà superiore in modalità intersect (tieni premuto MAIUSC + ALT). Ora dobbiamo solo riempire la selezione con # 121212 usando lo strumento Secchiello (G). Traccia successiva una linea nera 2px usando la nostra linea guida come aiuto, su un livello separato.
Ora dobbiamo aggiungere le cifre. Usando lo Strumento testo (T) crea un nuovo livello con le cifre e posizionalo sotto la linea che abbiamo creato in precedenza.
Basta aggiungere un po 'di sovrapposizione ai numeri per renderli un po' più realistici. Creare un nuovo livello sopra il livello delle cifre, selezionare la parte inferiore del pad e riempire con # b8b8b8, quindi riempire la parte superiore con # d7d7d7. Ora imposta la modalità di fusione su "Moltiplica".
Ok. Ora che abbiamo il nostro pad completo, dobbiamo dividerlo. L'idea principale è quella di dividere la cifra giusta da quella sinistra, quindi, invece di avere 60 immagini per i gruppi dei minuti e dei secondi, finirai con 20 immagini che useremo per entrambi i gruppi. Quindi, in sostanza, dobbiamo dividere il nostro pad in 4 immagini con le stesse dimensioni. Ho usato lo strumento di ritaglio (C) per questo lavoro.
Dopo aver ritagliato il pad, modificare la cifra e salvare ogni volta come un file .png separato in modo da finire con tutti i file necessari (numeri da 0 a 9). Ripeti questo passaggio per tutte le parti del pad. Si noti che per il pad delle ore, non si separano le cifre, si ha solo la parte superiore e inferiore. Alla fine ecco la nostra struttura di cartelle ("Double" per minuti e secondi, "Single" per ore):
Ora che abbiamo i nostri file pronti possiamo iniziare a programmare. Prima di tutto, abbiamo bisogno di due contenitori per le nostre immagini, uno per la "upperPart" del nostro orologio e uno per la "lowerPart".
Successivamente aggiungiamo le immagini. Ecco uno schema con l'ID che ho usato:
Ho dovuto usare un'immagine spaziale trasparente larga 1px e la stessa altezza delle altre immagini per evitare che i contenitori si restringessero quando i pad ruotano. Inoltre, non deve esserci spazio tra le immagini dello stesso gruppo (ad esempio "minutesUpLeft" e "minutesUpRight").
Ok. Questi saranno i pad anteriori del nostro orologio che si abbasseranno, ora dobbiamo impostare quelli posteriori, quindi quando i pad anteriori si capovolgono, le nuove cifre possono essere viste su di loro. Comprenderemo ciò che abbiamo fatto finora in un div e lo duplicheremo solo sopra di sé, aggiungendo a ogni immagine id la parola "Indietro" e cambiando nel file sorgente appropriato.
Ecco il file .html completo con riferimento al foglio di stile e il file javascript "animate.js" in cui creeremo l'animazione.
Crea un orologio a flip down animato 
La cosa principale che dobbiamo fare ora è sovrapporre le div "frontali" e "indietro". Per prima cosa posizioniamo il wrapper principale dove ne abbiamo bisogno e quindi diamo la stessa posizione assoluta a entrambi i contenitori.
# wrapper position: absolute; in alto: 100 px; a sinistra: 400px; #front, #back position: absolute; top: 0px;
Ora abbiamo bisogno di allineare verticalmente la parte superiore verso il basso e la parte inferiore verso l'alto, in modo che i pad sembrino essere ancorati a metà dell'orologio. Ho aggiunto le proprietà di altezza e visibilità per le parti frontali perché ne abbiamo bisogno per l'animazione in seguito.
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; altezza: 63px; vertical-align: bottom; visibilità: visibile; #lowerPart img position: relative; altezza: 63px; vertical-align: top; visibilità: visibile; #lowerPartBack img position: relative; vertical-align: top; #upperPartBack img position: relative; vertical-align: bottom;
Infine, tutto ciò che dobbiamo fare è limitare la larghezza dei pad perché vogliamo giocare solo con la loro altezza. Per impostazione predefinita, se si modifica uno di questi, l'immagine del foro verrà ridimensionata.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Qui è tutto messo insieme:
body background: # 000; # wrapper position: absolute; in alto: 100 px; a sinistra: 400px; #front, #back position: absolute; top: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; altezza: 63px; vertical-align: bottom; visibilità: visibile; #lowerPart img position: relative; altezza: 63px; vertical-align: top; visibilità: visibile; #lowerPartBack img position: relative; vertical-align: top; #upperPartBack img position: relative; vertical-align: bottom; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Prima di tutto abbiamo bisogno di alcune variabili per memorizzare il tempo che viene mostrato sui pad. Nota: h = ore, m1 = cifra dei minuti a sinistra, m2 = cifra dei minuti a destra, s1 = seconda cifra a sinistra, s2 = seconda cifra a destra.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Ora creiamo una funzione che verrà eseguita ogni secondo e aggiornerà il nostro orologio. Per prima cosa prendiamo l'ora corrente e determiniamo l'ora del giorno, AM o PM.
function retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; if (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12;
Quindi lo confrontiamo con il tempo mostrato sui pad e cambiamo quale gruppo è diverso. Usa una funzione chiamata "flip" che descriverò tra un minuto.
Accentsconagua
if (h! = h_current) flip ('hoursUp', 'hoursDown', h, 'Single / Up /' + ap + '/', 'Single / Down /' + ap + '/'); h_current = h; if (m2! = m2_current) flip ('minutesUpRight', 'minutesDownRight', m2, 'Double / Up / Right /', 'Double / Down / Right /'); m2_current = m2; flip ('minutesUpLeft', 'minutesDownLeft', m1, 'Double / Up / Left /', 'Double / Down / Left /'); m1_current = m1; if (s2! = s2_current) flip ('secondsUpRight', 'secondsDownRight', s2, 'Double / Up / Right /', 'Double / Down / Right /'); s2_current = s2; flip ('secondsUpLeft', 'secondsDownLeft', s1, 'Double / Up / Left /', 'Double / Down / Left /'); s1_current = s1; // end retroClock Ora, la funzione flip. Ha alcuni parametri: upperId, lowerId = gli id dei pad superiori e inferiori che si capovolgeranno; changeNumber = il nuovo valore che verrà mostrato; pathUpper, pathLower = i percorsi dei file di origine per il nuovo valore. L'animazione è composta dai seguenti passaggi:
Il pad superiore anteriore prende il valore di quello posteriore ed è reso visibile, sovrapponendolo, mentre quello inferiore è anche reso visibile ma l'altezza è cambiata in 0px.
funzione flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("visibility", "visible"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("visibility", "visible"); Ora cambiamo il pad posteriore superiore e anteriore inferiore al nuovo valore.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png";
Avendo questa configurazione possiamo avviare l'animazione attuale. Come ho detto prima, consiste nel ridurre l'altezza della parte superiore anteriore a 0%, 0 px, e aumentare l'altezza della parte inferiore anteriore al 100%, 63 px in questo caso. Al termine dell'animazione, il pad posteriore inferiore assume il nuovo valore e i pad anteriori vengono nascosti.
var flipUpper = new Fx.Tween (upperId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = new Fx.Tween (lowerId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibility", "hidden"); $ (upperId) .setStyle ("visibility") , "hidden");); flipLower.start ('height', 64);); flipUpper.start ('height', 0); // fine flip L'ultima cosa da fare è far funzionare la nostra funzione principale ogni secondo.
setInterval ('retroClock ()', 1000) ;; Qui è tutto messo insieme.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; funzione flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("visibility", "visible"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("visibility", "visible"); $ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png"; var flipUpper = new Fx.Tween (upperId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = new Fx.Tween (lowerId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibility", "hidden"); $ (upperId) .setStyle ("visibility") , "hidden");); flipLower.start ('height', 64);); flipUpper.start ('height', 0); // end flip function retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; if (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12; if( h != h_current) flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/'); h_current = h; if( m2 != m2_current) flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/'); m2_current = m2; flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/'); m1_current = m1; if (s2 != s2_current) flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/'); s2_current = s2; flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/'); s1_current = s1; //end retroClock setInterval('retroClock()', 1000); Abbiamo finito! Spero ti sia piaciuto lavorare su questo piccolo progetto, ha un concetto un po 'complesso, ma alla fine è un gadget davvero carino per i tuoi siti web. Non esitate a inviare eventuali suggerimenti che potreste avere!
