MENÚ

00. HOME

01. nosotros

02. casos

03. motion

04. news

05. CONTACTO

06. llamanos

Cómo revelar un elemento al hacer scroll en Divi Builder con código JQuery

February 25, 2024

Un efecto fácil de implementar y que hace que tu sitio tenga animaciones.

Con éste código podrás hacer que cualquier elemento de tu sitio, sea una sección, fila o módulo en Divi Builder se revele al hacer scroll.

Aquí en (var startOpacity = 10;) en número diez nos dice la cantidad de px para comenzar la revelación, puedes colocar la cantidad que sea necesario para lograr tu efecto.

Agregar el código en Integración y colocarlo en el Body en Divi Builder y luego a la sección, fila o módulo de agregas la clase “fade-on-scroll” para que se reproduzca.


<script>
jQuery(window).scroll(function() {
    var scrollTop = jQuery(window).scrollTop();
    var startOpacity = 10; // Indica cuando empieza el efecto
    var imgHeight = jQuery('.fade-on-scroll').height();

    if(scrollTop > startOpacity) {
        var opacity = (scrollTop - startOpacity) / imgHeight;
        if(opacity <= 1){
            jQuery('.fade-on-scroll').css('opacity', opacity);
        } else {
            jQuery('.fade-on-scroll').css('opacity', 1);
        }
    } else {
        jQuery('.fade-on-scroll').css('opacity', 0);
    }
});
</script>