L'acte d'afficher l'heure est assez populaire sur le Web. Mais cela ne se limite pas du tout à ce que nous portons habituellement à notre poignet ou que nous accrochons au mur.
Bien sûr, une montre traditionnelle peut ajouter à l'esthétique d'un site Web ou d'une application. Cependant, cela n'est vraiment utile que dans certaines situations, étant donné que les écrans de nos appareils montrent déjà les bases.
Un domaine où le temps brille vraiment est le décompte vers le haut ou vers le bas. Que vous montriez le temps écoulé d'un événement, comme un quiz en ligne ou le nombre de jours avant le lancement d'un excellent produit, ces articles peuvent ajouter un peu d'excitation. De plus, ils peuvent jouer un rôle important dans l'expérience globale de l'utilisateur.
Jetons un coup d'œil à quelques extraits de code que vous pouvez utiliser pour apporter des fonctionnalités liées au temps à vos projets.
Une vue high-tech
Bien que notre premier exemple puisse s'adapter à des montres plus traditionnelles, il a également un look ultra-moderne. Construit avec Vue.js, il montre comment le design peut ajouter une touche de personnalité aux technologies les plus élémentaires.
Voir le stylo de Toshiyuki TAKAHASHI avec montre numérique Vue.js
Très méta
Une montre faite de … montres? Cela peut sembler lointain, mais c'est exactement ce qu'est cet extrait CSS uniquement. Regardez les «aiguilles» des mini-horloges sélectionnées changer à l'unisson pour compter le temps écoulé. Comme les meilleures montres suisses, les mouvements sont incroyablement complexes.
Voir les montres Razvan Spatariu Stylo à bille
Compte à rebours pour lancer
Les comptes à rebours sont largement utilisés pour générer l'anticipation d'un grand événement. C'est peut-être un nouveau produit, une conférence ou même une première de film. Ils sont tout aussi amusants et utiles. Cet exemple attrayant offre un compte à rebours de 24 heures dans un style "flip" classique.
Voir le compte à rebours de la gomme à effacer de Dorian Camilleri
Les prochaines vacances sont toujours au coin de la rue
Un compte à rebours peut également profiter aux sites de commerce électronique qui souhaitent se concentrer sur des vacances spécifiques. Dans ce cas, c'est le jour de l'indépendance aux États-Unis. Mais un article déguisé comme celui-ci pourrait être une excellente touche pour pratiquement n'importe quel jour spécial que vous souhaitez attirer l'attention.
Voir DailyUI Pen # 014 Countdown Timer par Julie Park
Temps rapide
Les écrans de bienvenue semblent revenir. Mais au lieu de laisser les utilisateurs cliquer sur l'étape suivante, une redirection chronométrée peut être un bon moyen d'exprimer votre opinion sans trop de tracas. Cette animation de compte à rebours de film old school pourrait être parfaite pour une telle utilisation.
Regardez le compte à rebours du style de film de Craig Roblewsky
Une touche de classe
Les montres haut de gamme ne se démodent jamais. Avec de beaux regards et des mouvements de précision, ils capturent l'imagination. Ici, nous avons une reconstitution fidèle d'une montre Rolex. Il peut ne pas être aussi utile pour votre site Web quotidien, mais quelque chose à admirer néanmoins.
Regardez le Pen Rolex Oyster Perpetual Submariner: l'illustration HTML / CSS pure de Chris Ota
Chronographe
Synonyme de sport, les chronomètres sont utilisés pour chronométrer tout, des courses olympiques aux temps au tour de Formule 1. Dans cet esprit, cette pure récréation CSS est simple et belle. Le mouvement est remarquable sans être écrasant.
Regardez le chronomètre sur le stylo Hilo
Partout dans le monde
L'utilisation la plus pertinente d'une montre en ligne est peut-être d'afficher des relevés de différents fuseaux horaires. Ce magnifique extrait utilise Vue.js et profite du navigateur pour afficher les horaires du monde entier. Remarquez comment l'affichage change du jour à la nuit, en fonction de l'heure dans les paramètres régionaux sélectionnés.
Voir Comparaison du temps Pen Vue par Sarah Drasner
Le temps est écoulé
La mise en œuvre du temps, quelle que soit la forme, dans votre projet ajoute une couche supplémentaire de détails. Bien qu'il ne doive pas nécessairement être la caractéristique principale, il peut servir de moyen d'information et de divertissement.
Au-delà de leur utilité dans la conception Web, ces horloges et minuteries sont également une excellente introduction au fonctionnement de langages tels que JavaScript. En regardant l'un des extraits ci-dessus, vous comprendrez comment ces différents extraits de code sont combinés.
Donc, que vous cherchiez à ajouter de l'interactivité à votre site Web ou simplement à expérimenter, il y a quelque chose pour vous dans cette collection. Et si vous voulez voir plus d'exemples, consultez notre collection CodePen.
