L'acte d'afficher l'heure est assez populaire sur le Web. Mais cela ne se limite pas du tout \u00e0 ce que nous portons habituellement \u00e0 notre poignet ou que nous accrochons au mur.<\/p>\n
Bien s\u00fbr, une montre traditionnelle peut ajouter \u00e0 l'esth\u00e9tique d'un site Web ou d'une application. Cependant, cela n'est vraiment utile que dans certaines situations, \u00e9tant donn\u00e9 que les \u00e9crans de nos appareils montrent d\u00e9j\u00e0 les bases.<\/p>\n
Un domaine o\u00f9 le temps brille vraiment est le d\u00e9compte vers le haut ou vers le bas. Que vous montriez le temps \u00e9coul\u00e9 d'un \u00e9v\u00e9nement, 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\u00f4le important dans l'exp\u00e9rience globale de l'utilisateur.<\/p>\n
Jetons un coup d'\u0153il \u00e0 quelques extraits de code que vous pouvez utiliser pour apporter des fonctionnalit\u00e9s li\u00e9es au temps \u00e0 vos projets.<\/p>\n
Bien que notre premier exemple puisse s'adapter \u00e0 des montres plus traditionnelles, il a \u00e9galement un look ultra-moderne. Construit avec Vue.js, il montre comment le design peut ajouter une touche de personnalit\u00e9 aux technologies les plus \u00e9l\u00e9mentaires.<\/p>\n
Voir le stylo de Toshiyuki TAKAHASHI avec montre num\u00e9rique Vue.js<\/p>\n
Une montre faite de … montres? Cela peut sembler lointain, mais c'est exactement ce qu'est cet extrait CSS uniquement. Regardez les \u00abaiguilles\u00bb des mini-horloges s\u00e9lectionn\u00e9es changer \u00e0 l'unisson pour compter le temps \u00e9coul\u00e9. Comme les meilleures montres suisses, les mouvements sont incroyablement complexes.<\/p>\n
Voir les montres Razvan Spatariu Stylo \u00e0 bille<\/p>\n
Les comptes \u00e0 rebours sont largement utilis\u00e9s pour g\u00e9n\u00e9rer l'anticipation d'un grand \u00e9v\u00e9nement. C'est peut-\u00eatre un nouveau produit, une conf\u00e9rence ou m\u00eame une premi\u00e8re de film. Ils sont tout aussi amusants et utiles. Cet exemple attrayant offre un compte \u00e0 rebours de 24 heures dans un style "flip" classique.<\/p>\n
Voir le compte \u00e0 rebours de la gomme \u00e0 effacer de Dorian Camilleri<\/p>\n
Un compte \u00e0 rebours peut \u00e9galement profiter aux sites de commerce \u00e9lectronique qui souhaitent se concentrer sur des vacances sp\u00e9cifiques. Dans ce cas, c'est le jour de l'ind\u00e9pendance aux \u00c9tats-Unis. Mais un article d\u00e9guis\u00e9 comme celui-ci pourrait \u00eatre une excellente touche pour pratiquement n'importe quel jour sp\u00e9cial que vous souhaitez attirer l'attention.<\/p>\n
Voir DailyUI Pen # 014 Countdown Timer par Julie Park<\/p>\n
Les \u00e9crans de bienvenue semblent revenir. Mais au lieu de laisser les utilisateurs cliquer sur l'\u00e9tape suivante, une redirection chronom\u00e9tr\u00e9e peut \u00eatre un bon moyen d'exprimer votre opinion sans trop de tracas. Cette animation de compte \u00e0 rebours de film old school pourrait \u00eatre parfaite pour une telle utilisation.<\/p>\n
Regardez le compte \u00e0 rebours du style de film de Craig Roblewsky<\/p>\n
Les montres haut de gamme ne se d\u00e9modent jamais. Avec de beaux regards et des mouvements de pr\u00e9cision, ils capturent l'imagination. Ici, nous avons une reconstitution fid\u00e8le d'une montre Rolex. Il peut ne pas \u00eatre aussi utile pour votre site Web quotidien, mais quelque chose \u00e0 admirer n\u00e9anmoins.<\/p>\n
Regardez le Pen Rolex Oyster Perpetual Submariner: l'illustration HTML \/ CSS pure de Chris Ota<\/p>\n
Synonyme de sport, les chronom\u00e8tres sont utilis\u00e9s pour chronom\u00e9trer tout, des courses olympiques aux temps au tour de Formule 1. Dans cet esprit, cette pure r\u00e9cr\u00e9ation CSS est simple et belle. Le mouvement est remarquable sans \u00eatre \u00e9crasant.<\/p>\n
Regardez le chronom\u00e8tre sur le stylo Hilo<\/p>\n
L'utilisation la plus pertinente d'une montre en ligne est peut-\u00eatre d'afficher des relev\u00e9s de diff\u00e9rents 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 \u00e0 la nuit, en fonction de l'heure dans les param\u00e8tres r\u00e9gionaux s\u00e9lectionn\u00e9s.<\/p>\n
Voir Comparaison du temps Pen Vue par Sarah Drasner<\/p>\n
La mise en \u0153uvre du temps, quelle que soit la forme, dans votre projet ajoute une couche suppl\u00e9mentaire de d\u00e9tails. Bien qu'il ne doive pas n\u00e9cessairement \u00eatre la caract\u00e9ristique principale, il peut servir de moyen d'information et de divertissement.<\/p>\n
Au-del\u00e0 de leur utilit\u00e9 dans la conception Web, ces horloges et minuteries sont \u00e9galement une excellente introduction au fonctionnement de langages tels que JavaScript. En regardant l'un des extraits ci-dessus, vous comprendrez comment ces diff\u00e9rents extraits de code sont combin\u00e9s.<\/p>\n
Donc, que vous cherchiez \u00e0 ajouter de l'interactivit\u00e9 \u00e0 votre site Web ou simplement \u00e0 exp\u00e9rimenter, il y a quelque chose pour vous dans cette collection. Et si vous voulez voir plus d'exemples, consultez notre collection CodePen.<\/p>\n