Share
In deze tutorial maken we een geanimeerde flip-down klok geïnspireerd op de jaren 70. Met behulp van het Mootools-framework probeerde ik de flip-actie van de pads na te bootsen en het zo levensecht mogelijk te maken. Met zijn retro-stijl kan het heel netjes zijn om aan je website toe te voegen, dus laten we aan de slag gaan!
De klok is samengesteld uit drie groepen afbeeldingen: uren, minuten en seconden, die zijn gesplitst in een bovenste gedeelte en een onderste deel zodat we het "flip" -effect kunnen verkrijgen. De hoofdanimatie bestaat uit het verkleinen van de hoogte van het bovenste gedeelte van 100% tot 0%, en vervolgens het verhogen van de hoogte van het lagere gedeelte van 0% tot 100% voor elke groep waarin een cijfer verandert. Dit is het basisschema.
Eerst moeten we onze afbeeldingen maken.
Selecteer het "Afgeronde Ractangle-hulpmiddel" (U), stel de straal in op 10px en de kleur op # 0a0a0a en maak een 126px bij 126px-ractangle, u kunt de dimensie naar behoefte wijzigen, maar gewoon een even getal behouden. Herstel de vorm door naar Laag> Rasteren> Vorm of Rechter klik> Laag rasteriseren te gaan. Nu willen we dat "gat" tussen de twee delen creëren en de bovenste achtergrond een beetje lichter maken. Plaats een hulplijn op de horizontale helft van onze pad en selecteer vervolgens de gatenpad (Ctrl + klik op het laagpictogram) en selecteer met het gereedschap Rechthoekige selectiekader (M) de bovenste helft in de kruisende modus (houd Shift + Alt ingedrukt). Nu hoeven we alleen maar de selectie te vullen met # 121212 met behulp van de Paint Bucket Tool (G). Volg vervolgens een 2px zwarte lijn met behulp van onze hulplijn als hulp op een aparte laag.
Nu moeten we de cijfers toevoegen. Gebruik het gereedschap Tekst (T) om een nieuwe laag met de cijfers te maken en plaats deze onder de regel die we eerder hebben gemaakt.
Voeg gewoon een beetje overlay toe aan de cijfers zodat ze er wat realistischer uitzien. Maak een nieuwe laag boven de getallenlaag, selecteer het onderste gedeelte van de pad en vul met # b8b8b8, en vul het bovenste gedeelte met # d7d7d7. Zet nu de mengmodus op "Vermenigvuldigen".
OK. Nu dat we onze voltooide pad hebben, moeten we het splitsen. Het belangrijkste idee is om het juiste cijfer van de linker te splitsen, dus in plaats van 60 afbeeldingen voor de minuten en secondengroepen, krijg je uiteindelijk 20 afbeeldingen die we voor beide groepen gebruiken. Dus eigenlijk moeten we onze pad opsplitsen in 4 afbeeldingen met dezelfde afmetingen. Ik heb de Crop Tool (C) voor deze taak gebruikt.
Nadat je de pad hebt bijgesneden, verander je het cijfer en sla je elke keer op als een afzonderlijke .png, zodat je uiteindelijk alle bestanden krijgt die je nodig hebt (cijfers van 0 - 9). Herhaal deze stap voor alle delen van de pad. Merk op dat je voor het urenpad de cijfers niet van elkaar scheidt, je hebt alleen het bovenste en onderste deel. Op het einde is hier onze mappenstructuur ("Double" voor minuten en seconden, "Single" voor uren):
Nu we onze bestanden klaar hebben, kunnen we beginnen met coderen. Allereerst hebben we twee containers nodig voor onze afbeeldingen, één voor de "bovenste deel" van onze klok en één voor de "lagere part".
Vervolgens voegen we de afbeeldingen toe. Hier is een schema met de id's die ik heb gebruikt:
Ik moest een transparant spacer-beeld gebruiken dat 1px breed is en op dezelfde hoogte als de andere afbeeldingen om te voorkomen dat de containers krimpen wanneer de pads omslaan. Er mag ook geen spatie zijn tussen de afbeeldingen uit dezelfde groep (bijvoorbeeld "minutesUpLeft" en "minutesUpRight").
OK. Dit zullen de voorkussens zijn van onze klok die naar beneden zal klappen, nu moeten we de achterblokken instellen, dus wanneer de voorste pads omdraaien, kunnen de nieuwe cijfers op hen worden bekeken. We zullen inpakken wat we tot nu toe in een div gedaan hebben en het gewoon boven zichzelf dupliceren, aan elke afbeeldings-ID het woord "Terug" toevoegen en veranderen in het juiste bronbestand.
Hier is het complete .html-bestand met verwijzing naar de stylesheet en het javascript-bestand "animate.js" waarin we de animatie zullen maken.
Maak een geanimeerde flipdown-klok 
Het belangrijkste dat we nu moeten doen is de afdelingen "voorkant" en "achterkant" overlappen. Eerst plaatsen we de hoofdwikkelaar waar we hem nodig hebben en geven we vervolgens dezelfde absolute positie aan beide containers.
#wrapper positie: absoluut; top: 100px; left: 400px; #front, #back position: absolute; top: 0px;
Nu moeten we het bovenste deel verticaal uitlijnen tot aan de onderkant en het onderste deel tot de bovenkant, zodat de kussens er uitzien alsof ze verankerd zijn aan het midden van de klok. Ik heb de hoogte- en zichtbaarheidseigenschappen voor de voorste delen toegevoegd omdat we ze later nodig hebben voor de animatie.
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; hoogte: 63px; vertical-align: bottom; zichtbaarheid: zichtbaar; #lowerPart img positie: relatief; hoogte: 63px; vertical-align: top; zichtbaarheid: zichtbaar; #lowerPartBack img position: relative; vertical-align: top; #upperPartBack img position: relative; vertical-align: bottom;
Tot slot hoeven we alleen maar de breedte van de pads te beperken, omdat we alleen met hun lengte willen spelen. Als u een ervan wijzigt, wordt standaard de afbeelding van het gat geschaald.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #minutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Hier is alles bij elkaar:
body achtergrond: # 000; #wrapper positie: absoluut; top: 100px; left: 400px; #front, #back position: absolute; top: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; hoogte: 63px; vertical-align: bottom; zichtbaarheid: zichtbaar; #lowerPart img positie: relatief; hoogte: 63px; vertical-align: top; zichtbaarheid: zichtbaar; #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;
Allereerst hebben we enkele variabelen nodig om de tijd op te slaan die op de pads wordt getoond. Opmerking: h = uren, m1 = het linker minutencijfer, m2 = het juiste minutencijfer, s1 = het linker tweede cijfer, s2 = het juiste tweede cijfer.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Nu maken we een functie die elke seconde wordt uitgevoerd en onze klok wordt bijgewerkt. Eerst krijgen we de huidige tijd en bepalen we het tijdstip van de dag, AM of 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;
Vervolgens vergelijken we het met de tijd die op de pads wordt weergegeven en verandert de groep die anders is. Het gebruikt een functie genaamd "flip" die ik in een minuut zal beschrijven.
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; // einde retroClock Nu de flip-functie. Het heeft een paar parameters: upperId, lowerId = de id's van de bovenste en onderste pads die zullen omkeren; changeNumber = de nieuwe waarde die wordt getoond; pathUpper, pathLower = de paden naar de bronbestanden voor de nieuwe waarde. De animatie bestaat uit de volgende stappen:
Het bovenste pad aan de voorkant neemt de waarde van de achterste en neemt deze zichtbaar over, terwijl de onderste pad ook zichtbaar wordt gemaakt maar de hoogte is veranderd naar 0px.
functie 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"); Nu veranderen we de bovenste en onderste onderplaat van de achterkant naar de nieuwe waarde.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png";
Met deze opstelling kunnen we de eigenlijke animatie starten. Zoals ik eerder al zei, bestaat het erin om de hoogte van het bovenste voorgedeelte te verlagen tot 0%, 0px en de hoogte van het onderste voorste gedeelte te verhogen tot 100%, 63px in dit geval. Nadat de animatie is voltooid, neemt de onderste onderste pad de nieuwe waarde aan en worden de voorste pads verborgen.
var flipUpper = new Fx.Tween (upperId, duration: 200, transition: Fx.Transitionss.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = new Fx.Tween (lowerId, duration: 200, transition: Fx.Transitionss.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibility", "hidden"); $ (upperId) .setStyle ("visibility") , "verborgen");); flipLower.start ('height', 64);); flipUpper.start ('height', 0); // einde flip Het laatste wat u moet doen, is dat onze hoofdfunctie elke seconde wordt uitgevoerd.
setInterval ('retroClock ()', 1000) ;; Hier is alles bij elkaar.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; functie 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.Transitionss.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = new Fx.Tween (lowerId, duration: 200, transition: Fx.Transitionss.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibility", "hidden"); $ (upperId) .setStyle ("visibility") , "verborgen");); flipLower.start ('height', 64);); flipUpper.start ('height', 0); // einde flip-functie 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); We zijn klaar! Ik hoop dat je het leuk vond om aan dit kleine project te werken, het heeft een enigszins ingewikkeld concept, maar uiteindelijk is het een heel leuk gadget voor je websites. Aarzel niet om suggesties te sturen!
