Share
I den här handledningen skapar vi en animerad flip down klocka inspirerad av 70-talet. Med hjälp av Mootools-ramverket försökte jag replikera padsens flip-action och göra den så livlig som möjligt. Med retro styling kan det vara en väldigt snygg sak att lägga till på din webbplats, så låt oss börja!
Klockan består av tre grupper av bilder: timmar, minuter och sekunder, som är uppdelade i en övre del och en nedre del så att vi kan få "flip" -effekten. Huvudanimationen består i att sänka höjden på den övre delen från 100% till 0%, och höja höjden på den nedre delen från 0% till 100% för varje grupp där en siffra ändras. Här är det grundläggande systemet.
Först måste vi skapa våra bilder.
Välj "Rounded Ractangle Tool" (U), ställ radien till 10px och färgen till # 0a0a0a och skapa en 126px med 126px ractangle. Du kan ändra dimensionen enligt dina behov, bara hålla dem ett jämnt antal. Ändra formen genom att gå till Lager> Rasterize> Form eller högerklicka> Rasterize Layer. Nu vill vi skapa det "gapet" mellan de två delarna och göra den övre bakgrunden lite ljusare. Placera en styrlinje i den horisontella halvan av kudden, välj sedan hålkudden (Ctrl + Klicka på lagikonen) och med Rektangulär markeringsverktyg (M) välj den övre halvan i skärningsläge (håll Shift + Alt). Nu måste vi bara fylla urvalet med # 121212 med Paint Bucket Tool (G). Följ sedan en 2px svart linje med hjälp av vår guidelinje som hjälp, på ett separat lager.
Nu måste vi lägga till siffrorna. Använd typverktyget (T) genom att skapa ett nytt lager med siffrorna och placera det under den linje som vi skapat tidigare.
Lägg bara till lite överlagring på siffrorna för att få dem att se lite mer realistiska ut. Skapa ett nytt lager ovanför siffrellaget, välj den nedre delen av dynan och fyll i med # b8b8b8 och fyll sedan den övre delen med # d7d7d7. Ställ nu blandningsläget på "Multiplicera".
Ok. Nu när vi har vår färdiga kudde måste vi dela upp den. Huvudsidan är att dela upp den högra siffran från vänster, så i stället för att ha 60 bilder för minuter och sekunder, slutar du med 20 bilder som vi ska använda för båda grupperna. Så enkelt måste vi dela upp vår kudde i 4 bilder med samma dimensioner. Jag använde grödverktyget (C) för detta jobb.
Efter att du har beskjutat pallen, ändra siffra och spara varje gång som en separat .png så att du hamnar med alla filer du behöver (nummer 0-9). Upprepa detta steg för alla delar av dynan. Observera att du inte separerar siffrorna för timmarna, du har bara den övre och nedre delen. I slutet här är vår mappstruktur ("Dubbel" i minuter och sekunder, "Singel" i timmar):
Nu när vi har våra filer redo kan vi börja kodning. Först och främst behöver vi två behållare för våra bilder, en för "överdelen" av vår klocka och en för "lowerPart".
Nästa lägger vi till bilderna. Här är ett schema med de ID-er jag har använt:
Jag var tvungen att använda en transparent spacerbild som är 1px bred och samma höjd som de andra bilderna för att hålla behållarna krympande när dynorna vänder. Det får inte heller finnas något mellanslag mellan bilderna från samma grupp (t ex "minutesUpLeft" och "minutesUpRight").
Ok. Dessa kommer att vara de främre kuddarna i vår klocka som kommer att vända ner, nu måste vi sätta upp de bakre, så när de främre kuddarna flipar, kan de nya siffrorna ses på dem. Vi kommer att pakka in det vi hittills har gjort i en div och bara duplicera det ovanför sig och lägger till varje bild id ordet "Tillbaka" och byter till lämplig källfil.
Här är den fullständiga .html-filen med hänvisning till stilarket och javascriptfilen "animate.js" där vi skapar animationen.
Skapa en animerad Flip Down Clock 
Det viktigaste som vi måste göra nu är att överlappa "fronten" och "tillbaka" divs. Först placerar vi huvudomslaget där vi behöver det och ger sedan samma absoluta position till båda behållarna.
#wrapper position: absolute; topp: 100px; vänster: 400px; #front, #back position: absolute; top: 0px;
Nu måste vi vertikalt anpassa övre delen till botten och nedre delen till toppen så att dynorna ser ut som de är förankrade till mitten av klockan. Jag har lagt till höjden och synlighetsegenskaperna för de främre delarna eftersom vi behöver dem för animeringen senare.
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; höjd: 63px; vertikal-align: botten; synlighet: synliga; #lowerPart img position: relative; höjd: 63px; vertikal-align: topp; synlighet: synliga; #lowerPartBack img position: relative; vertikal-align: topp; #upperPartBack img position: relative; vertikal-align: botten;
Slutligen är allt vi behöver göra för att begränsa bredden på dynorna eftersom vi bara vill leka med sin höjd. Som standard, om du ändrar en av dem, kommer hålbilden att skalas.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack bredd : 63px;
Här sammanfogas allt:
kropp bakgrund: # 000; #wrapper position: absolute; topp: 100px; vänster: 400px; #front, #back position: absolute; top: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; höjd: 63px; vertikal-align: botten; synlighet: synliga; #lowerPart img position: relative; höjd: 63px; vertikal-align: topp; synlighet: synliga; #lowerPartBack img position: relative; vertikal-align: topp; #upperPartBack img position: relative; vertikal-align: botten; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack bredd : 63px;
Först och främst behöver vi några variabler för att lagra tiden som visas på dynorna. Obs: h = timmar, m1 = vänster minutsiffra, m2 = rätt minutsiffra, s1 = vänster andra siffra, s2 = rätt andra siffra.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Nu skapar vi en funktion som körs varje sekund och uppdaterar vår klocka. Först får vi den aktuella tiden och bestämmer tid på dagen, AM eller PM.
funktion retroClock () nu = nytt datum (); h = nu.getHours (); m1 = nu.getMinutes () / 10; m2 = nu.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = nu.getSeconds ()% 10; if (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12;
Då jämför vi det med tiden som visas på kuddarna och ändrar vilken grupp som är annorlunda. Den använder en funktion som heter "flip" som jag kommer att beskriva om en minut.
Accentsconagua
om (h! = h_current) flip ('hoursUp', 'hoursDown', h, 'Single / Up /' + ap + '/', 'Single / Down /' + ap + '/'); h_current = h; om (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; 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; // slut retroClock Nu, flip-funktionen. Den har några parametrar: upperId, lowerId = ids för de övre och nedre pads som ska vända; changeNumber = det nya värdet som ska visas; pathUpper, pathLower = banorna till källfilerna för det nya värdet. Animationen består av följande steg:
Den främre övre kudden tar värdet på den bakre delen och det är synligt, överlappar det, medan det nedre är synligt men det är höjden ändras till 0px.
funktion flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("synlighet", "synlig"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("synlighet", "synlig"); Nu byter vi den bakre övre och främre undre kudden till det nya värdet.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ".png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ".png";
Med denna inställning kan vi starta den faktiska animationen. Som jag nämnde tidigare består det i att minska höjden på den främre övre delen till 0%, 0px och öka höjden på den främre underdelen till 100%, 63px i detta fall. Efter att animeringen är klar tar den bakre nedre kudden det nya värdet och de främre kuddarna blir dolda.
var flipUpper = ny Fx.Tween (upperId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': funktion () var flipLower = ny Fx.Tween (lowerId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': funktion () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("synlighet", "dold"); $ (upperId) .setStyle , "dold");); flipLower.start ("height", 64);); flipUpper.start ('height', 0); // slutet flip Det sista att göra är att göra vår huvudsakliga funktion köra varje sekund.
setInterval ('retroClock ()', 1000) ;; Här sätts det samman.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; funktion flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("synlighet", "synlig"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("synlighet", "synlig"); $ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ".png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ".png"; var flipUpper = ny Fx.Tween (upperId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': funktion () var flipLower = ny Fx.Tween (lowerId, duration: 200, transition: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': funktion () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("synlighet", "dold"); $ (upperId) .setStyle , "dold");); flipLower.start ("height", 64);); flipUpper.start ('height', 0); // End-flip-funktionen retroClock () nu = nytt datum (); h = nu.getHours (); m1 = nu.getMinutes () / 10; m2 = nu.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = nu.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 är klara! Hoppas att du har tyckt om att arbeta med det här lilla projektet, det har ett något komplicerat koncept, men i slutändan är det en riktigt snygg gadget för dina webbplatser. Tveka inte att skicka några förslag du kan ha!
