En este tutorial vamos a explicaros cómo crear animaciones de scroll para WordPress sin necesidad de ningún plugin. En el tutorial vamos explicar como realizarlo con Gutenberg pero perfectamente se puede aplicar a Elementor o cualquier otro maquetador de temas.
Para una buena compresión de los pasos del tutorial ves revisando el video que encontrarás al final del artículo.
Llamar a Qjuery
Lo primero que vamos a realizar es llamar a la librería de Jquery. Si las animaciones la vamos a aplicar en una única pagina podemos insertar el script en dicha página y así ahorrarnos la carga de la librería en todas las páginas.
Por el contrario si vamos a aplicar animaciones en varias páginas podemos insertar la llamada a Jquery en la cabecera utilizando WP codelite
En el apartado cabecera y píe insertaremos el siguiente script en la cabecera y guardaremos los cambios.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Seleccionar el efecto de animación
Para ello nos iremos a la web de Animista y buscaremos la animación que queremos aplicar. Copiaremos el código que hace referencia a la clase de la animación y los keyframes y los pegaremos en apariencia/personalizar/css adicional de nuestro administrador de WordPress.
Definir la animación de scroll en WordPress
Dentro de la página donde vayamos a aplicar las animaciónes y al principio de ella insertaremos el siguiente script con un widget de html.
<script type="javascript/blocked" data-wpmeteor-type="text/javascript" >
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var containerOffset = $('.animascroll').offset().top -450;
if (scrollTop > containerOffset) {
$('.animascroll').addClass('slide-in-bottom');
$('.animascroll').removeClass('ocultar');
} else {
$('.animascroll').addClass('ocultar');
$('.animascroll').removeClass('slide-in-bottom');
}
});
</script>
Lo siguiente que vamos a definir es en que punto del scroll se debe aplicar la animación. Para ello deberemos ir al contenedor o al widget que queramos animar y definirle la clase que le dice al scroll que cuando llegue a ese punto se aplique la animación.
En nuestro caso, la clase a aplicar es animascroll.
Seguimos y dentro del script deberemos modificar la clase de la animación. Para ello nos vamos donde hemos pegado el código CSS, copiar la clase y modificarla dentro del script. Las líneas a modificar son las de la imagen.
Ocultar los elementos animados
Para evitar que los elementos animados se muestren y que la animación se aplique cuando el scroll llegue al punto donde se debe aplicar la animación vamos a ocultarlo.
Para ello dentro de tu WordPress nos volvemos a apariencia/personalizar/css adicional y vamos a definir la clase ocultar con un atributo de visibility:hidden.
.ocultar{
visibility:hidden;
}
Y aplicaremos el atributo CSS visibility:visible dentro de la clase que hace referencia a nuestra animación. Y ya tendríamos aplicada nuestra animación de scroll para WordPress.
Aplicar más de una animación
Si quisieras aplicar más animaciones dentro de la misma página deberás duplicar las siguientes líneas dentro de la función de javascript y crear una nueva clase para en nuevo punto de animación.
También deberás definir una nueva variable y añadirla al comparador IF.
Ya por ultimo te tocara modificar las clases de las animaciones y aplicar la nueva siempre que el efecto sea diferente
var nuevavariable = $('.nuevaclaseparapuntodeanimacion').offset().top -450;
if (scrollTop > nuevavariable) {
$('.animascroll').addClass('nuevaclasedeanimacion');
$('.animascroll').removeClass('ocultar');
} else {
$('.animascroll').addClass('ocultar');
$('.animascroll').removeClass('nuevaclasedeanimacion');
}
Puedes ver otros ejemplos de animaciones clicando aquí.
