Cuenta regresiva animada en tiempo real para la llegada del Año Nuevo — 100% estático, sin servidor ni PHP.
NewYear Timer es una página web que muestra una cuenta regresiva hacia el 1 de enero del próximo año. El año objetivo se calcula dinámicamente en el navegador, por lo que el mismo proyecto funciona año tras año sin modificaciones.
Cuando el contador llega a cero, lanza una celebración con confetti y muestra el año nuevo con animaciones de entrada, pulso y brillo.
- Sin servidor: corre completamente en el navegador (HTML + CSS + JS puro).
- Año dinámico: detecta automáticamente el próximo año nuevo con
new Date(). - Animaciones: flip de números con
slideFade, confetti, shimmer y pulso en el año celebrado. - Responsive: se adapta a móvil, tableta y escritorio con
clamp()y flexbox. - Accesibilidad: respeta
prefers-reduced-motion, desactivando animaciones si el usuario lo prefiere. - Web Share API: botón "Compartir" nativo en dispositivos compatibles.
- SEO ready: metas
og:*ytwitter:cardincluidas.
NewYear-Timer/
├── index.html # Estructura y marcado
├── styles.css # Estilos, animaciones y variables CSS
├── script.js # Lógica del contador, confetti y compartir
├── img/
│ ├── fondo.gif # GIF festivo al llegar año nuevo
│ ├── fondoNewYear.gif # GIF de fondo durante la cuenta regresiva
│ ├── og-image.png # Imagen para redes sociales
└── README.md
# Doble clic en index.html o
open index.html# Python
python3 -m http.server 8080
# Node.js
npx serve .
# PHP
php -S localhost:8080Luego visita http://localhost:8080.
Sube la carpeta completa a cualquiera de estas plataformas:
| Plataforma | Cómo |
|---|---|
| GitHub Pages | Push al branch gh-pages |
| Netlify | Arrastra y suelta la carpeta |
| Vercel | vercel deploy |
| Cloudflare Pages | Conecta el repositorio |
En index.html, justo antes del cierre del <body>:
// Auto-detectado
const TARGET_YEAR = new Date().getFullYear() + 1;
// O forzar un año específico
const TARGET_YEAR = 2026;En script.js:
const DEBUG_MODE = true; // ← cambiar a trueEn styles.css:
:root {
--primary: #6366f1; /* botones y enlaces */
--primary-dark: #4f46e5; /* hover */
--primary-light:#818cf8; /* acento suave */
--bg-primary: #0f172a; /* fondo general */
--bg-secondary: #1e293b; /* footer */
}Albertson Terrero López — @Alb3rtsonTL
Este proyecto está bajo la licencia MIT. Puedes usar, copiar, modificar y distribuir el código siempre que conserves el aviso de copyright y atribución al autor original. Consulta el archivo LICENSE para más detalles.