Share
Dans ce tutoriel, nous allons créer une horloge rabattable animée inspirée des années 70. En utilisant le framework Mootools, j'ai essayé de reproduire l'action de retournement des pads et de la rendre aussi réaliste que possible. Avec son style rétro, il pourrait être une bonne chose à ajouter à votre site Web, alors commençons!
L'horloge est composée de trois groupes d'images: les heures, les minutes et les secondes, qui sont divisées en une partie supérieure et une partie inférieure afin d'obtenir l'effet "retournement". L'animation principale consiste à réduire la hauteur de la partie supérieure de 100% à 0%, puis à augmenter la hauteur de la partie inférieure de 0% à 100% pour chaque groupe dans lequel un chiffre est modifié. Voici le schéma de base.
Tout d'abord, nous devons créer nos images.
Sélectionnez l'outil "Rounded Ractangle Tool" (U), définissez le rayon sur 10 pixels et la couleur sur # 0a0a0a et créez un cercle 126 x 126 pixels. Vous pouvez modifier la dimension en fonction de vos besoins, il suffit de les conserver à un nombre pair. Restérisez la forme en accédant à Couche> Rasteriser> Forme ou clic droit> Rasteriser un calque. Nous voulons maintenant créer cet "espace" entre les deux parties et rendre l'arrière-plan supérieur un peu plus clair. Placez une ligne de repère sur la moitié horizontale de notre pavé, puis sélectionnez le pavé perforé (Ctrl + clic sur l'icône de la couche) et avec l'outil Rectangle de sélection (M), sélectionnez la moitié supérieure en mode intersection (maintenez les touches Maj + Alt). Il ne reste plus qu’à remplir la sélection avec le n ° 121212 à l’aide de l'outil Pot de peinture (G). Tracez ensuite une ligne noire de 2 pixels en utilisant notre ligne de guidage comme aide, sur un calque séparé..
Maintenant, nous devons ajouter les chiffres. À l'aide de l'outil Texte (T), créez un nouveau calque avec les chiffres et placez-le sous la ligne créée précédemment..
Ajoutez juste un peu de superposition sur les chiffres pour les rendre un peu plus réalistes. Créez un nouveau calque au-dessus du calque de chiffres, sélectionnez la partie inférieure du pavé et remplissez-le avec # b8b8b8, puis remplissez la partie supérieure avec # d7d7d7. Maintenant, réglez le mode de fusion sur "Multiplier".
D'accord. Maintenant que nous avons terminé notre dossier, nous devons le scinder. L'idée principale est de séparer le chiffre de droite du chiffre de gauche. Ainsi, au lieu d'avoir 60 images pour les groupes de minutes et de secondes, vous obtenez 20 images que nous utiliserons pour les deux groupes. Donc, fondamentalement, nous devons diviser notre pad en 4 images de mêmes dimensions. J'ai utilisé l'outil de recadrage (C) pour ce travail.
Après avoir recadré le pad, changez le chiffre et enregistrez chaque fois sous un fichier .png séparé pour obtenir tous les fichiers dont vous avez besoin (numéros de 0 à 9). Répétez cette étape pour toutes les parties du pad. Notez que pour le pavé des heures, vous ne séparez pas les chiffres, vous avez juste la partie supérieure et inférieure. Au final, voici notre structure de dossiers ("Double" pour les minutes et les secondes, "Simple" pour les heures):
Maintenant que nos fichiers sont prêts, nous pouvons commencer à coder. Tout d’abord, nous avons besoin de deux conteneurs pour nos images, un pour la "partie supérieure" de notre horloge et un pour la "partie inférieure".
Ensuite, nous ajoutons les images. Voici un schéma avec les identifiants que j'ai utilisés:
J'ai dû utiliser une image d'espacement transparente d'une largeur de 1 px et de la même hauteur que les autres images afin d'empêcher les récipients de se rétrécir lorsque les tampons se retournent. De même, il ne doit y avoir aucun espace entre les images du même groupe (par exemple, "minutesUpLeft" et "minutesUpRight")..
D'accord. Ce seront les pads avant de notre horloge qui se rabattront. Nous devons maintenant configurer ceux d’arrière. Ainsi, lorsque les pads avant s’inclinent, les nouveaux chiffres sont visibles. Nous allons envelopper ce que nous avons fait jusqu’à présent dans une div et le dupliquer au-dessus de lui-même, en ajoutant à chaque id d’image le mot "Back" et en changeant le fichier source approprié..
Voici le fichier .html complet en référence à la feuille de style et au fichier javascript "animate.js" dans lequel nous allons créer l'animation.
Créer une horloge Flip Down animée 
La principale chose que nous devons faire maintenant est de chevaucher les div "avant" et "arrière". Tout d'abord, nous positionnons l'emballage principal où nous en avons besoin, puis nous donnons la même position absolue aux deux conteneurs..
#wrapper position: absolute; en haut: 100px; à gauche: 400px; #front, #back position: absolute; en haut: 0px;
Nous devons maintenant aligner verticalement la partie supérieure vers le bas et la partie inférieure vers le haut pour que les coussinets aient l’impression d’être ancrés au milieu de l’horloge. J'ai ajouté les propriétés de hauteur et de visibilité pour les parties avant, car nous en avons besoin pour l'animation ultérieurement..
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; hauteur: 63px; alignement vertical: bas; visibilité: visible; #lowerPart img position: relative; hauteur: 63px; alignement vertical: en haut; visibilité: visible; #lowerPartBack img position: relative; alignement vertical: en haut; #upperPartBack img position: relative; alignement vertical: bas;
Enfin, tout ce que nous avons à faire est de limiter la largeur des pads car nous voulons jouer uniquement avec leur hauteur. Par défaut, si vous en changez un, l'image du trou sera mise à l'échelle.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Ici tout est mis ensemble:
body background: # 000; #wrapper position: absolute; en haut: 100px; à gauche: 400px; #front, #back position: absolute; en haut: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; hauteur: 63px; alignement vertical: bas; visibilité: visible; #lowerPart img position: relative; hauteur: 63px; alignement vertical: en haut; visibilité: visible; #lowerPartBack img position: relative; alignement vertical: en haut; #upperPartBack img position: relative; alignement vertical: bas; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Tout d’abord, nous avons besoin de variables pour stocker l’heure affichée sur les pads. Remarque: h = heures, m1 = chiffre des minutes de gauche, m2 = chiffre des minutes de droite, s1 = chiffre des secondes de gauche, s2 = chiffre des secondes de droite.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
Maintenant, nous créons une fonction qui fonctionnera toutes les secondes et mettrons à jour notre horloge. D'abord, nous obtenons l'heure actuelle et déterminons l'heure du jour, AM ou PM.
fonction retroClock () maintenant = nouvelle Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; si (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12;
Ensuite, nous le comparons à l'heure indiquée sur les pads et changeons le groupe qui est différent. Il utilise une fonction appelée "flip" que je décrirai dans une minute.
Accentsconagua
if (h! = h_current) flip ('hoursUp', 'hoursDown', h, 'Single / Up /' + ap + '/', 'Single / Down /' + ap + '/'); h_current = h; if (m2! = m2_current) flip ('minutes UpRight', 'minutesDownRight', m2, 'Double / Haut / Droite /', 'Double / Bas / Droite /'); m2_current = m2; retourner ('minutes UpLeft', 'minutesDownLeft', m1, 'Double / Haut / Gauche /', 'Double / Bas / Gauche /'); m1_current = m1; if (s2! = s2_current) flip ('secondsUpRight', 'secondsDownRight', s2, 'Double / Haut / Droite /', 'Double / Bas / Droite /'); s2_current = s2; retourner ('secondes UpLeft', 'secondesDownLeft', s1, 'Double / Haut / Gauche /', 'Double / Bas / Gauche /'); s1_current = s1; // end retroClock Maintenant, la fonction Flip. Il a quelques paramètres: upperId, lowerId = les identifiants des pads supérieur et inférieur qui basculeront; changeNumber = la nouvelle valeur qui sera affichée; pathUpper, pathLower = les chemins d'accès aux fichiers source pour la nouvelle valeur. L'animation est composée des étapes suivantes:
Le coussinet supérieur avant prend la valeur de celui du dos et il est rendu visible, en le superposant, tandis que le coussinet inférieur est également visible, mais sa hauteur est modifiée en 0px.
fonction flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("visibilité", "visible"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("visibilité", "visible"); Maintenant, nous modifions les coussinets arrière supérieur et inférieur avant à la nouvelle valeur.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png";
Ayant cette configuration, nous pouvons commencer l'animation réelle. Comme je l'ai mentionné précédemment, il consiste à réduire la hauteur de la partie supérieure avant à 0%, 0px, et à augmenter la hauteur de la partie inférieure avant à 100%, 63px dans ce cas. Une fois l’animation terminée, le pad inférieur arrière prend la nouvelle valeur et les pads avant sont masqués..
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': () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibilité", "masqué"); $ (upperId) .setStyle ("visibilité" , "hidden");); flipLower.start ('height', 64);)); flipUpper.start ('height', 0); // end flip La dernière chose à faire est de faire fonctionner notre fonction principale chaque seconde..
setInterval ('retroClock ()', 1000) ;; Ici tout est mis ensemble.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; fonction flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("visibilité", "visible"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("visibilité", "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': () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibilité", "masqué"); $ (upperId) .setStyle ("visibilité" , "hidden");); flipLower.start ('height', 64);)); flipUpper.start ('height', 0); // end retourne la fonction retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; si (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); Nous avons finis! J'espère que vous avez aimé travailler sur ce petit projet. Son concept est un peu complexe, mais au final, il s'agit d'un gadget très soigné pour vos sites Web. S'il vous plaît n'hésitez pas à envoyer des suggestions que vous pourriez avoir!
