Share
I denne opplæringen vil vi lage en animert flip-down klokke inspirert av 70-tallet. Ved hjelp av Mootools-rammene, prøvde jeg å kopiere flippene til pads og gjøre det så livlig som mulig. Med det er retro styling, kan det være en veldig fin ting å legge til på nettstedet ditt, så la oss komme i gang!
Klokken består av tre grupper av bilder: timer, minutter og sekunder, som er delt i en øvre del og en nedre del slik at vi kan få "flip" -effekten. Hovedanimasjonen består i å redusere høyden på den øvre delen fra 100% til 0%, og deretter øke høyden på den nedre delen fra 0% til 100% for hver gruppe der et siffer endres. Her er grunnleggende ordningen.
Først må vi lage våre bilder.
Velg "Avrundet Raktangle Tool" (U), sett radius til 10px og fargen til # 0a0a0a og opprett en 126px ved 126px ractangle. Du kan endre dimensjonen etter dine behov, bare hold dem et jevnt tall. Resterer formen ved å gå til Lag> Rasterize> Shape eller Right Click> Rasterize Layer. Nå ønsker vi å skape det "gapet" mellom de to delene og gjøre den øvre bakgrunnen litt lettere. Plasser en styrelinje på den horisontale halvdelen av puten, velg deretter hullputen (Ctrl + Klikk på lagikonet) og med Rektangulær markørverktøy (M) velg den øvre halvdelen i skjæringsmodus (hold Shift + Alt). Nå må vi bare fylle ut valget med # 121212 ved hjelp av Paint Bucket Tool (G). Neste spor en 2px, svart linje med vår guide linje som hjelp, på et eget lag.
Nå må vi legge til tallene. Bruk typeverktøyet (T) til å lage et nytt lag med sifrene og plassere det under linjen vi har opprettet tidligere.
Bare legg til et lite overlegg på tallene for å få dem til å se litt mer realistisk ut. Opprett et nytt lag over sifferlaget, velg nedre del av puten og fyll ut med # b8b8b8, og fyll deretter den øvre delen med # d7d7d7. Sett nå blandemodus til "Multiply".
Ok. Nå som vi har vår ferdige pute, må vi splitte den opp. Hovedideen er å dele det riktige sifferet fra venstre, så i stedet for å ha 60 bilder for minutter og sekunder grupper, slutter du med 20 bilder som vi skal bruke for begge gruppene. Så grunnleggende må vi splitte puten i 4 bilder med samme dimensjoner. Jeg brukte Beskjæringsverktøyet (C) for denne jobben.
Når du beskjærer puten, endrer du sifferet og lagrer hver gang som en separat .png slik at du ender opp med alle filene du trenger (tall fra 0-9). Gjenta dette trinnet for alle deler av puten. Legg merke til at for timeputen, ikke skille sifferene, du har bare den øvre og nedre delen. Til slutt er vår mappestruktur ("Double" i minutter og sekunder, "Single" i timer):
Nå som vi har våre filer klare, kan vi starte kodingen. Først og fremst trenger vi to beholdere for våre bilder, en for "øvre delen" av klokken vår og en for "lowerPart".
Deretter legger vi til bildene. Her er en ordning med idene jeg har brukt:
Jeg måtte bruke et gjennomsiktig mellomrom som er 1px bredt og samme høyde som de andre bildene for å holde beholderne krympet når padsene flipper. Det må heller ikke være mellomrom mellom bildene fra samme gruppe (for eksempel "minutesUpLeft" og "minutesUpRight")..
Ok. Disse vil være frontputer av vår klokke som vil klappe ned, nå må vi sette opp de bakre, så når frontpadsene flip, kan de nye sifrene ses på dem. Vi vil pakke inn det vi har gjort så langt i en div og bare duplisere det over seg selv, og legg til hvert bilde id ordet "Tilbake" og skifte til riktig kildefil.
Her er den komplette .html-filen med henvisning til stilarket og javascriptfilen "animate.js" der vi skal lage animasjonen.
Lag en animert flip-down klokke 
Det viktigste vi må gjøre nå er å overlappe "front" og "back" divs. Først plasserer vi hovedinnpakningen der vi trenger det og gir den samme absoluttposisjon til begge beholdere.
#wrapper posisjon: absolutt; topp: 100px; venstre: 400px; #front, #back posisjon: absolutt; top: 0px;
Nå må vi vertikalt justere den øvre delen til bunnen og underdelen til toppen, slik at padsene vil se ut som de er forankret til midt på klokken. Jeg har lagt til høyden og synlighetsegenskapene til frontdelene fordi vi trenger dem til animasjonen senere.
#upperPart, #upperPartBack vertikaljustering: bunn; #lowerPart, #lowerPartBack vertikaljustering: topp; #upperPart img posisjon: relative; høyde: 63px; vertical-Justering: bunn; synlighet: synlig; #lowerPart img posisjon: relative; høyde: 63px; vertical-align: top; synlighet: synlig; #lowerPartBack img posisjon: relative; vertical-align: top; #upperPartBack img posisjon: relative; vertical-Justering: bunn;
Endelig er alt vi trenger å gjøre for å begrense bredden på pads fordi vi bare vil spille rundt med høyden. Som standard, hvis du endrer en av dem, blir hullbildet skalert.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack bredde : 63px;
Her er det alt satt sammen:
kropp bakgrunn: # 000; #wrapper posisjon: absolutt; topp: 100px; venstre: 400px; #front, #back posisjon: absolutt; top: 0px; #upperPart, #upperPartBack vertikaljustering: bunn; #lowerPart, #lowerPartBack vertikaljustering: topp; #upperPart img posisjon: relative; høyde: 63px; vertical-Justering: bunn; synlighet: synlig; #lowerPart img posisjon: relative; høyde: 63px; vertical-align: top; synlighet: synlig; #lowerPartBack img posisjon: relative; vertical-align: top; #upperPartBack img posisjon: relative; vertical-Justering: bunn; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack bredde : 63px;
Først og fremst trenger vi noen variabler for å lagre tiden som vises på padsene. Merk: h = timer, m1 = venstre minuttsiffer, m2 = høyre minuttsiffer, s1 = venstre sekundsiffer, s2 = høyre andre siffer.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Nå lager vi en funksjon som løper hvert sekund og oppdaterer klokken vår. Først får vi den nåværende tiden og bestemmer tidspunktet på dagen, AM eller PM.
funksjon retroClock () now = new Date (); h = nå.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;
Da sammenligner vi det med tiden som vises på pads og endrer hvilken gruppe som er forskjellig. Den bruker en funksjon som kalles "flip" som jeg vil beskrive om et minutt.
Accentsconagua
hvis (h! = h_current) flip ('timerUp', 'timerDown', h, 'Single / Up /' + ap + '/', 'Single / Down /' + ap + '/'); h_current = h; hvis (m2! = m2_strøm) 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; hvis (s2! = s2_strøm) 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 Nå, flip-funksjonen. Den har noen parametre: upperId, lowerId = ids for de øvre og nedre pads som vil vende; changeNumber = den nye verdien som vil bli vist; pathUpper, pathLower = banene til kildefilene for den nye verdien. Animasjonen består av følgende trinn:
Den fremre øvre puten tar verdien av ryggen og den er synlig, overlapper den, mens den nederste er også synlig, men den er høyde endret til 0px.
funksjon flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("høyde", "63px"); $ (upperId) .setStyle ("synlighet", "synlig"); $ (lowerId) .setStyle ("høyde", "0px"); $ (lowerId) .setStyle ("synlighet", "synlig"); Nå skifter vi den bakre øvre og nedre pute til den nye verdien.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ".png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ".png";
Med dette oppsettet kan vi starte den faktiske animasjonen. Som nevnt tidligere består det av å redusere høyden på den øvre delen til 0%, 0px, og øke høyden på den nedre delen til 100%, 63px i dette tilfellet. Etter at animasjonen er fullført, tar den nedre nedre puten den nye verdien og frontputene er gjemte.
var flipUpper = ny Fx.Tween (upperId, varighet: 200, overgang: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': funksjon () var flipLower = ny Fx.Tween (lowerId, varighet: 200, overgang: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': funksjon () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("synlighet", "skjult"); $ (øvreId) .setStyle , "skjult");); flipLower.start ('høyde', 64);); flipUpper.start ('høyde', 0); // sluttvippe Den endelige tingen å gjøre er å gjøre hovedfunksjonen vår hvert sekund.
setInterval ('retroClock ()', 1000) ;; Her er det alt satt sammen.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; funksjon flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("høyde", "63px"); $ (upperId) .setStyle ("synlighet", "synlig"); $ (lowerId) .setStyle ("høyde", "0px"); $ (lowerId) .setStyle ("synlighet", "synlig"); $ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ".png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ".png"; var flipUpper = ny Fx.Tween (upperId, varighet: 200, overgang: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': funksjon () var flipLower = ny Fx.Tween (lowerId, varighet: 200, overgang: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': funksjon () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("synlighet", "skjult"); $ (øvreId) .setStyle , "skjult");); flipLower.start ('høyde', 64);); flipUpper.start ('høyde', 0); // End Flip-funksjonen retroClock () now = new Date (); h = nå.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); Vi er ferdige! Håper du har hatt glede av å jobbe med dette lille prosjektet, det har et noe komplekst konsept, men til slutt er det en veldig fin gadget for nettstedene dine. Ikke nøl med å sende noen forslag du måtte ha!
