Cómo crear un efecto de transición de página con aparición gradual con JavaScript y CSS

Introducción

Los efectos de transición de página brindan una estética visual a la experiencia del usuario de su aplicación. JavaScript puede detectar cuándo se carga el modelo de objetos del documento y usarse para agregar o eliminar una clase que aplica una transición CSS para crear un efecto de “aparición gradual”.

En este artículo aprenderá cómo hacer que aparezcan gradualmente sus páginas con JavaScript y CSS.

Prerrequisitos

Para completar este tutorial, necesitará lo siguiente:

• classListSe recomienda comprender el objeto, pero no es obligatorio. Para obtener más información sobre el classListobjeto, consulte nuestro tutorial Cómo modificar clases CSS en JavaScript .

Paso 1: uso de CSS opacityytransition

En primer lugar, deberá crear reglas CSS para determinar cuándo se abre la página y cuándo se produce el fundido de entrada. Este efecto dependerá de las propiedades opacityy transition. Si agrega y elimina la fadeclase en el bodyelemento, puede hacer que la opacidad pase de 0a 1:

índice.html

head  style  body {    opacity: 1;    transition-duration: 0.7s;    transition-property: opacity;  }  body.fade {    opacity: 0;  }  /style/head

El código de entrada gradual que escribirá aplicará rápidamente la fadeclase al bodyelemento y lo configurará para que no tenga opacidad ( 0). Una vez que se cargue la página, eliminará la fadeclase del bodyelemento y lo configurará con opacidad completa ( 1) durante la duración de 0.7segundos.

Paso 2: aplicación de la clase Fade-in

En su página, justo después de la bodyetiqueta de apertura, asigne la fadeclase al bodyelemento:

índice.html

body  script    document.body.className = 'fade';  /script  !-- ... --/body

Alternativamente, si su bodyelemento contiene clases existentes, puede aplicar la fadeclase utilizando el .add()método en el classListobjeto.

En su index.htmlarchivo, agregue el .add()método al classListobjeto e inserte la fadeclase como argumento:

índice.html

body  script    document.body.classList.add('fade');  /script  !-- ... --/body

Esto agregará la fadeclase a sus clases existentes.

Paso 3: eliminar la clase Fade-in

Para eliminar una transición de entrada gradual de sus clases, puede implementar un detector de eventos para cuando se haya cargado el modelo de objetos del documento. También puede implementar un retraso para garantizar que el efecto de transición sea visible para un lector.

En su index.htmlarchivo, emplee un detector de eventos y asigne al nombre de clase de su bodyelemento el valor de una cadena vacía:

índice.html

body  !-- ... --  script    document.addEventListener("DOMContentLoaded", () = {      window.setTimeout(function() {        document.body.className = '';      }, 230);    });  /script/body

La cadena vacía le dice a JavaScript que revierta el nombre de la clase después de que se haya cargado la página.

Alternativamente, si su bodyelemento contiene clases existentes, utilice el .remove()método en el classListobjeto:

índice.html

body  !-- ... --  script    document.addEventListener("DOMContentLoaded", () = {      window.setTimeout(function() {        document.body.classList.remove('fade');      }, 230);    });  /script/body

El .remove()método eliminará la fadeclase.

Ahora, cuando cargue la página, inicialmente se agregará una fadeclase al bodyelemento. Una transición CSS comenzará a cambiar la opacidad de 0a 1en el transcurso de 0.7unos segundos. Una vez que la página haya terminado de cargarse, la fadeclase se eliminará del bodyelemento.

Conclusión

En este artículo, utilizaste una combinación de JavaScript y CSS para crear un efecto de “aparición gradual” cuando se carga una página. Utilizaste opacityy transitionpara crear el efecto. Luego, utilizaste la manipulación del DOM para agregar y eliminar una clase que activa la transición.