La desarrolladora localghost ha renovado su sitio web añadiendo fondos dinámicos que cambian según la hora del día, utilizando la API Temporal de JavaScript y la función CSS color-mix. El sistema divide el día en cuatro etapas (amanecer, día, atardecer y noche), con colores definidos en el espacio OKLCH. La API Temporal permite obtener la hora local del usuario sin complicaciones, y con su método compare se determina la etapa actual. Luego, para transiciones suaves, se emplea color-mix para mezclar gradualmente los colores de la etapa actual con los de la siguiente, calculando el progreso mediante la función until de Temporal. Esto evita cortes bruscos y ofrece una experiencia visual envolvente. Además, se almacena la preferencia del usuario en sessionStorage. El artículo explica paso a paso la implementación, desde la definición de las etapas hasta la aplicación de gradientes en CSS, destacando la simplicidad de Temporal frente a la API Date tradicional. También se menciona que el tema nocturno incluye estrellas y que el cambio de colores afecta al fondo principal y al pie de página.
Noticias agregadas con IA