O ato de exibir o tempo é bastante popular na web. Mas não se limita ao que normalmente usamos no pulso ou pendurados na parede.
Certamente, um relógio tradicional pode aumentar a estética de um site ou aplicativo. No entanto, isso é realmente realmente útil em determinadas situações, considerando que as telas em nossos dispositivos já mostram o básico.
Uma área em que o tempo realmente brilha é a contagem para cima ou para baixo. Esteja você mostrando o tempo decorrido de um evento, como um questionário on-line ou o número de dias até o lançamento de um ótimo produto, esses itens podem adicionar um pouco de emoção. Além disso, eles podem desempenhar um papel importante na experiência geral do usuário.
Vamos dar uma olhada em alguns trechos de código que você pode usar para trazer funcionalidade relacionada ao tempo para seus projetos.
Um Vue de alta tecnologia
Embora nosso primeiro exemplo possa ser usado em relógios mais tradicionais, ele também possui uma aparência ultramoderna. Construído com o Vue.js, mostra como o design pode adicionar um toque de personalidade às tecnologias mais básicas.
Veja a caneta de Toshiyuki TAKAHASHI com o relógio digital Vue.js.
Very meta
Um relógio feito de … relógios? Pode parecer distante, mas é exatamente isso que é esse trecho apenas de CSS. Assista as "mãos" nos mini-relógios selecionados mudarem em uníssono para contar o tempo decorrido. Como os melhores relógios suíços, os movimentos são incrivelmente complexos.
Veja Razvan Spatariu Relógios Relógio de caneta esferográfica
Contagem regressiva para o lançamento
As contagens regressivas são amplamente usadas para gerar antecipação para um grande evento. Talvez seja um novo produto, uma conferência ou até mesmo uma estréia de filme. Eles são igualmente divertidos e úteis. Este exemplo atraente oferece uma contagem regressiva de 24 horas no estilo "flip" clássico.
Veja a contagem regressiva do apagador de caneta de Dorian Camilleri
As próximas férias estão sempre chegando
Uma contagem regressiva também pode beneficiar sites de comércio eletrônico que desejam se concentrar em férias específicas. Nesse caso, é o Dia da Independência nos EUA. Mas um item disfarçado como esse pode ser um ótimo toque para praticamente qualquer dia especial em que você gostaria de chamar a atenção.
Veja DailyUI Pen # 014 Temporizador por Julie Park
Tempo rápido
As telas de boas-vindas parecem estar voltando. Mas, em vez de permitir que os usuários cliquem no próximo o, um redirecionamento cronometrado pode ser uma boa maneira de expressar sua opinião sem muito trabalho. Esta animação de contagem regressiva de filmes da velha escola poderia ser perfeita para esse uso.
Assista à contagem regressiva do estilo de filme com caneta de Craig Roblewsky
Um toque de classe
Os relógios de luxo nunca saem de moda. Com um visual bonito e movimentos de precisão, eles capturam a imaginação. Aqui, temos uma recriação fiel de um relógio Rolex. Pode não ser tão útil para o seu site todos os dias, mas algo para irar, no entanto.
Assista ao Pen Rolex Oyster Perpetual Submariner: a pura ilustração HTML / CSS de Chris Ota
Cronógrafo
Sinônimo de esporte, os cronômetros são usados para cronometrar tudo, desde as corridas olímpicas até os tempos da Fórmula 1. Nesse espírito, essa pura recreação de CSS é simples e bonita. O movimento é notável sem ser avassalador.
Olhe o cronômetro na caneta Hilo
Ao redor do mundo
Talvez o uso mais relevante para um relógio online seja exibir leituras de vários fusos horários. Este snippet magnífico usa o Vue.js e aproveita o navegador para mostrar os horários do mundo inteiro. Observe como a exibição muda de dia para noite, dependendo da hora no local selecionado.
Veja Comparação de Tempo de Pen Vue por Sarah Drasner
Acabou o tempo
O tempo de implementação, independentemente da forma, em seu projeto adiciona uma camada adicional de detalhes. Embora não seja necessariamente a principal característica, pode servir como um meio de informação e entretenimento.
Além da utilidade no design da web, esses relógios e timers também são uma excelente introdução para o funcionamento de linguagens como o JavaScript. Observando um dos trechos acima, você entenderá como esses vários trechos de código são combinados.
Portanto, se você deseja adicionar alguma interatividade ao seu site ou apenas experimentar, há algo para você nesta coleção. E se você quiser ver mais exemplos, confira nossa coleção CodePen.
