{"id":21770,"date":"2023-12-23T09:01:41","date_gmt":"2023-12-23T08:01:41","guid":{"rendered":"https:\/\/fran.cosmobuzz.es\/?p=21770"},"modified":"2024-01-04T17:07:10","modified_gmt":"2024-01-04T16:07:10","slug":"crear-animaciones-con-javascript-en-wordpress","status":"publish","type":"post","link":"https:\/\/fran.cosmobuzz.es\/en\/crear-animaciones-con-javascript-en-wordpress\/","title":{"rendered":"Crear animaciones con JavaScript en WordPress"},"content":{"rendered":"

Las animaciones en una pagina web son una parte extra al contenido, un efecto que puede aportar algo de originalidad a una p\u00e1gina en concreto, haci\u00e9ndola m\u00e1s llamativa para el usuario.<\/p>\n\n\n\n

En este caso voy a poner un par de ejemplos para que prob\u00e9is en vuestra p\u00e1gina. Las instrucciones estan m\u00e1s bien enfocadas a usarlas en el tema Generatepress o Astra, pero se puede insertar en cualquier sitio WordPress.<\/p>\n\n\n\n

1er Efecto<\/strong>: el objeto se aparece suavemente al cargar la p\u00e1gina<\/h2>\n\n\n\n

En el caso de WP, aseg\u00farate de que tu elemento tenga una clase espec\u00edfica, por ejemplo, desde un bloque de imagen – Avanzado – Clases CSS: mi-elemento-animado<\/mark><\/code><\/p>\n\n\n\n

<img class="mi-elemento-animado alignnone wp-image-21779 size-medium" src="https:\/\/fran.cosmobuzz.es\/wp-content\/uploads\/2023\/12\/night-9061_java-1-300x250.gif" alt="" width="300" height="250" \/><\/code><\/pre>\n\n\n\n
Estructura en html<\/em><\/p>\n\n\n\n
<\/div>\n\n\n\n
Agrega estilos CSS desde el personalizador para inicialmente ocultar el elemento y luego aplicar una transici\u00f3n suave en la propiedad de opacidad:<\/p>\n\n\n\n
\/* Transici\u00f3n suave de 1 segundo para cambiar la opacidad *\/\n.mi-elemento-animado {\n    opacity: 0; \/* Inicialmente establece la opacidad en 0 para ocultar el elemento *\/\n    transition: opacity 1s ease-in-out; \n}\n\n\/* Cuando se aplica la clase \"mostrar\", la opacidad se establece en 1, revelando el elemento *\/\n.mi-elemento-animado.mostrar {\n    opacity: 1; \n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Puedes usar JavaScript para a\u00f1adir la clase \u00abmostrar\u00bb al elemento despu\u00e9s de que la p\u00e1gina se haya cargado. Agrega el siguiente c\u00f3digo en el pie de p\u00e1gina atrav\u00e9s de un hook (gancho) o usando el plugin Insert Headers And Footers<\/a><\/strong> si tu tema no dispone de esta funcionalidad.<\/p>\n\n\n\n
Nota:<\/strong> si usas un hook debes colocarlo en wp-footer y si usas el plugin insertalo en la zona Scripts in Footer<\/p>\n\n\n\n
\"\"\/
Ejemplo en plugin<\/em> (s\u00f3lo para el script)<\/figcaption><\/figure>\n\n\n\n
C\u00f3digo JavaScript envuelto en HTML:<\/p>\n\n\n\n
<script type=\"text\/javascript\">\n    document.addEventListener('DOMContentLoaded', function() {\n        var elemento = document.querySelector('.mi-elemento-animado');\n        elemento.classList.add('mostrar');\n    });\n<\/script><\/code><\/pre>\n\n\n\n
Esto garantiza que la clase \u00abmostrar\u00bb se a\u00f1ada al elemento despu\u00e9s de que el DOM se haya cargado. Guarda tus cambios y verifica que la animaci\u00f3n funcione correctamente al cargar la p\u00e1gina. Puedes ajustar la duraci\u00f3n de la transici\u00f3n y otros estilos seg\u00fan tus necesidades.<\/p>\n\n\n\n
<\/div>\n\n\n\n
2\u00ba Efecto<\/strong>: Animaci\u00f3n al hacer scroll<\/h2>\n\n\n\n
En este caso, los pasos a seguir ser\u00e1n id\u00e9nticos que en el efecto anterior, s\u00f3lo debemos de cambiar el c\u00f3digo.<\/p>\n\n\n\n
Dentro del bloque de imagen en Avanzado – Clases CSS:  animacion-scroll<\/mark><\/code><\/p>\n\n\n\n
Agrega estilos CSS para la animaci\u00f3n. En este ejemplo, usaremos la clase fade-in :<\/p>\n\n\n\n
\/* Agrega este estilo a tu archivo de estilo CSS o en el Personalizador de WordPress *\/\n.animacion-scroll {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 1s ease, transform 1s ease;\n}\n\n.animacion-scroll.fade-in {\n  opacity: 1;\n  transform: translateY(0);\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Agrega el siguiente Script en el hook o utiliza el plugin Insert Headers And Footers<\/strong>:<\/p>\n\n\n\n
<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  \/\/ Encuentra el elemento que deseas animar\n  var animatedElement = document.querySelector('.animacion-scroll');\n\n  function isElementInViewport(el) {\n    var rect = el.getBoundingClientRect();\n    return (\n      rect.top >= 0 &&\n      rect.left >= 0 &&\n      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n      rect.right <= (window.innerWidth || document.documentElement.clientWidth)\n    );\n  }\n\n  function fadeInOnScroll() {\n    if (isElementInViewport(animatedElement)) {\n      animatedElement.classList.add('fade-in');\n      \/\/ Desregistra el evento despu\u00e9s de que la animaci\u00f3n ha ocurrido una vez\n      window.removeEventListener('scroll', fadeInOnScroll);\n    }\n  }\n\n  \/\/ Registra el evento de desplazamiento\n  window.addEventListener('scroll', fadeInOnScroll);\n\n  \/\/ Activa la funci\u00f3n al cargar la p\u00e1gina\n  fadeInOnScroll();\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n
Este script agrega la clase fade-in<\/strong> al elemento cuando est\u00e1 en el viewport, lo que activar\u00e1 la animaci\u00f3n CSS.<\/p>\n\n\n\n
\n