Blurry-Loading "Carga Borrosa".
En este ejercicio, realizaremos una animación de carga porcentual, donde de acuerdo al porcentaje se mostrara con mayor claridad el fondo de nutra pagina web, como en todos estos ejercicios te explicamos como codificarlo a fin de que puedas emplearlo en tus diversos proyectos de desarrollo de paginas web.
1.Carga porcentual.
2.Mostrar el contenido.
¿Cómo se realiza ?
El código completo lo puede encontrar en: https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation del autor Brad Traversy
HTML .
- DOCTYPE y <html>:
Declara el tipo de documento como HTML5.
Define el idioma del contenido como inglés. - <head>:
Contiene metadatos sobre el documento.
Incluye el conjunto de caracteres (UTF-8) para soportar una amplia gama de caracteres.
Establece la ventana gráfica para el diseño responsivo.
Enlaza el archivo CSS externo (style.css) para los estilos.
Define el título de la página como "Blurry Loading". - <body>:
Contiene la estructura principal del contenido.
Incluye una sección (<section class="bg">) que servirá como fondo de la página.
Contiene un <div> con la clase loading-text que muestra el porcentaje de carga (inicia en 0%).
Enlaza el archivo JavaScript externo (script.js) para la funcionalidad.
CSS.
En general lo mas significativo del CSS es:
- bg:
Aplica una imagen de fondo centrada y ajustada para cubrir toda el área.
Posiciona el fondo de manera absoluta y lo extiende un poco más allá de los bordes de la ventana para evitar bordes visibles con el desenfoque.
Coloca el fondo detrás de otros elementos (z-index: -1).
Inicialmente, no aplica ningún desenfoque.
JavaScript.
- Selección de elementos:
loadText selecciona el elemento con la clase loading-text.
bg selecciona el elemento con la clase bg. - Inicialización de variables:
load se inicializa en 0.
int establece un intervalo que llama a la función blurring cada 30 milisegundos. - Función blurring:
Incrementa load en 1.
Si load supera 99, detiene el intervalo (clearInterval(int)).
Actualiza el texto de carga para mostrar el porcentaje actual (${load}%).
Cambia la opacidad del texto de carga de 1 a 0 a medida que load va de 0 a 100.
Ajusta el filtro de desenfoque del fondo de 30px a 0px a medida que load va de 0 a 100. - Función scale:
Mapea un número de un rango de entrada a un rango de salida. En este caso, se usa para convertir el rango de load (0 a 100) a los rangos necesarios para la opacidad y el desenfoque.
Recuerda que este ejercicio pertenece al repositorio:
50 proyectos en 50 días: https://github.com/bradtraversy/50projects50days