Ancla de menú: Scroll con efecto elástico

Scroll con efecto elástico: Este efecto simula un rebote elástico al llegar a la sección de destino. Es una opción llamativa y divertida, pero puede no ser adecuada para todos los sitios web.

Para crear un efecto de desplazamiento con efecto elástico (elastic scroll) en enlaces de un icono a una sección específica de la página utilizando el widget de ancla de menú de Elementor, sigue estos pasos:

1. Instalar y activar el plugin “Code Snippets” si aún no lo has hecho.
2. Añadir un nuevo snippet con el siguiente código:

add_action(‘wp_head’, function () { ?>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
// Seleccionar todos los enlaces de anclaje dentro de los iconos de Elementor
const iconLinks = document.querySelectorAll(‘.elementor-icon-list-item a[href*=”#”]’);
// Agregar el evento de clic a cada enlace
iconLinks.forEach(link => {
link.addEventListener(‘click’, function(event) {
// Prevenir el comportamiento predeterminado del enlace
event.preventDefault();
// Obtener el destino del enlace
const targetId = this.getAttribute(‘href’).substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
// Coordenadas iniciales
const startX = window.scrollX || window.pageXOffset;
const startY = window.scrollY || window.pageYOffset;
const endY = targetElement.getBoundingClientRect().top + startY;
// Duración de la animación
const duration = 1000;
const startTime = performance.now();
// Función de easing elástico
function elasticEaseOut(t) {
return Math.sin(-13 * (t + 1) * Math.PI / 2) * Math.pow(2, -10 * t) + 1;
}
function animateScroll(currentTime) {
const timeElapsed = currentTime – startTime;
const progress = Math.min(timeElapsed / duration, 1);
const easedProgress = elasticEaseOut(progress);
window.scrollTo(0, startY + (endY – startY) * easedProgress);
if (timeElapsed < duration) {
requestAnimationFrame(animateScroll);
}
}
requestAnimationFrame(animateScroll);
}
});
});
});
</script>
<?php });

Explicación del código:

1. Evento DOMContentLoaded: Espera a que todo el DOM esté cargado antes de ejecutar el script.
2. Seleccionar enlaces de anclaje: Selecciona todos los enlaces de anclaje dentro de los iconos de Elementor que tengan un href que contenga #.
3. Agregar evento de clic: Agrega un evento de clic a cada enlace de anclaje.
4. Prevenir comportamiento predeterminado: Previene el comportamiento predeterminado del enlace (que es saltar directamente al ancla).
5. Obtener el destino del enlace: Extrae el ID del destino desde el href del enlace.
6. Calcular coordenadas: Calcula las coordenadas iniciales y finales del desplazamiento.
7. Función de easing elástico: Define una función de easing elástico que controla el progreso del desplazamiento.
8. Función de animación: Define una función de animación que ajusta la posición de desplazamiento basándose en el progreso.
9. Iniciar la animación: Inicia la animación utilizando requestAnimationFrame.

Cómo usarlo:

• Crea un nuevo snippet en el plugin “Code Snippets” y pega el código anterior.
• Activa el snippet para que esté disponible en todo el sitio.

Nota:

Este código asume que los enlaces de anclaje están dentro de los iconos de Elementor y tienen la clase .elementor-icon-list-item. Asegúrate de que tus iconos de Elementor tengan la estructura correcta o ajusta el selector según sea necesario.

Este código aplicará un efecto de desplazamiento con efecto elástico a todos los enlaces de anclaje en los iconos de Elementor en tu sitio, mejorando la experiencia del usuario al navegar entre secciones de la página.