Neste tutorial, você aprenderá como criar uma contagem regressiva animada para o Natal utilizando HTML, CSS e JavaScript. Este projeto é ideal para iniciantes e é uma ótima maneira de praticar integração de tecnologias front-end.
Veja a Contagem Regressiva para o Natal em Funcionamento neste link. Contagem Regressiva para o Natal.
Veja o vídeo no YouTube:
Pré-requisitos
- Conhecimento básico em HTML, CSS e JavaScript.
- Um editor de código como VS Code.
- Um navegador web para visualizar o resultado.
1. Estrutura do Projeto
Crie uma pasta chamada Contagem-regressiva-para-natal e dentro dela, crie três arquivos:
index.html: Contém o layout da aplicação.
style.css: Para estilização.
script.js: Para a lógica de contagem regressiva.
2. HTML: Estruturando o Layout
No arquivo index.html, insira o seguinte código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contagem Regressiva para o Natal</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section class="section">
<div class="main-container">
<div class="content">
<div class="circle-column bounce">
<div class="circle blue">
<div id="chrs-days"></div>
</div>
</div>
<div class="circle-column bounce">
<div class="circle yellow">
<div id="chrs-hrs"></div>
</div>
</div>
<div class="circle-column bounce">
<div class="circle green">
<div id="chrs-min"></div>
</div>
</div>
<div class="circle-column bounce">
<div class="circle white">
<div id="chrs-sec"></div>
</div>
</div>
</div>
<div class="intro">
<h1>Feliz Natal!</h1>
<h3>25 Dez, 2024</h3>
<a href="#" class="shop-btn">Compre Agora</a>
</div>
</div>
</section>
</body>
</html>
Aqui, criamos uma seção com círculos que exibirão a contagem regressiva e uma mensagem de boas festas.
3. CSS: Adicionando Estilo e Animação
No arquivo style.css, adicione:
@import url('https://fonts.googleapis.com/css?family=Emilys+Candy&display=swap');
@import url('https://fonts.googleapis.com/css?family=Mountains+of+Christmas&display=swap');
body{
margin: 0;
padding: 0;
}
*{
box-sizing: border-box;
}
.section{
background-color: #b01010;
font-family: 'Emilys Candy', cursive;
padding: 0 15px 30px 15px;
}
.content{
display: flex;
flex-wrap: wrap;
}
.main-container{
max-width: 1170px;
margin: 0 auto;
}
.circle-column {
align-items: flex-end;
display: flex;
flex: 0 0 25%;
height: 260px;
max-width: 25%;
position: relative;
width: 100%;
z-index: 1;
padding: 0 5px;
}
.circle-column::before {
background-color: red;
content: "";
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 2px;
z-index: -1;
}
.circle-column .circle {
align-items: center;
border-radius: 50%;
display: flex;
font-size: 66px;
justify-content: center;
margin: 0 auto;
position: relative;
text-align: center;
width: 180px;
font-weight: bold;
}
.circle-column .circle span{
display: block;
text-transform: capitalize;
font-weight: normal;
font-size: 22px;
}
.circle-column .circle::before {
background-color: #c03636;
border-radius: 45%;
border: 2px solid #f99d24;
content: "";
height: 15px;
left: -1px;
margin: 0 auto;
position: absolute;
right: 0;
top: -19px;
width: 5px;
}
.circle-column .circle::after {
content: "";
padding-top: 100%;
}
.circle-column .circle.blue {
background-color: #1624e4;
}
.circle-column .circle.yellow {
background-color:#f7f30a;
}
.circle-column .circle.green {
background-color: #0acf0a;
}
.circle-column .circle.white {
background-color: #ffffff;
}
.intro{
color: #ffffff;
text-align: center;
}
.intro h1{
font-size: 90px;
margin: 40px 0 0 0;
}
.intro h3 {
font-family: 'Mountains of Christmas', cursive;
font-size: 45px;
margin: 0;
text-transform: uppercase;
}
.shop-btn {
border-radius: 3px;
border: 2px dashed #ffffff;
color: #ffffff;
display: inline-block;
font-family: 'Mountains of Christmas', cursive;
font-size: 34px;
font-weight: bold;
margin-top: 30px;
min-width: 200px;
padding: 4px 10px;
text-decoration: none;
}
.shop-btn:hover,
.shop-btn:focus{
outline: 0;
text-decoration: none;
background-color: #0b290b;
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
transform: translate3d(0, 0, 0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
}
@media screen and (max-width: 767px) {
.circle-column .circle {
font-size: 26px;
}
.intro h1 {
font-size: 54px;
}
.circle-column .circle span{
font-size: 16px;
}
}
@media screen and (max-width: 500px) {
.circle-column .circle {
font-size: 20px;
}
.intro h1 {
font-size: 40px;
}
.circle-column .circle span{
font-size: 10px;
}
}
Aqui, usamos animações para dar um efeito de "pulo" nos círculos.
4. JavaScript: Criando a Lógica
No arquivo script.js, insira o seguinte código:
var dest = new Date(
"dec 25, 2024 12:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var diff = dest - now;
var days = Math.floor(diff / (1000 *
60 * 60 * 24));
var hours = Math.floor((diff % (
1000 * 60 * 60 * 24)) / (1000 *
60 * 60));
var minutes = Math.floor((diff % (
1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((diff % (
1000 * 60)) / 1000);
document.getElementById('chrs-days')
.innerHTML = days +
"Dias";
document.getElementById('chrs-hrs')
.innerHTML = hours +
"horas";
document.getElementById('chrs-min')
.innerHTML = minutes +
"min";
document.getElementById('chrs-sec')
.innerHTML = seconds +
"seg";
}, 1000);
Este código calcula a diferença entre a data atual e o Natal e atualiza os valores na tela.
5. Testando o Projeto
- Abra o arquivo
index.htmlno navegador. - Veja a contagem regressiva funcionando com a estilização e animação.
Dicas de Personalização
- Mude as cores: Altere os estilos no
style.csspara criar um tema próprio.
- Adicione um som natalino: Insira um áudio ao final da contagem.
Se preferir, os códigos estão no meu Repositório no GitHub.
Conclusão
Este projeto combina elementos essenciais do desenvolvimento web. Agora você tem uma aplicação funcional que pode ser usada como decoração digital para o Natal!
Comentários
Postar um comentário
Obrigado pelo seu feedback!