Cerrar video

Efecto Parallax Divi: Desvanecer fondo al desplazarse

por | Oct 12, 2019 | Tutorial gratuito | 14 Comentarios

Hola qué tal bienvenido o bienvenida a este nuevo tutorial dónde vas a aprender a realizar un estupendo efecto parallax con divi.

Si ya eres un usuario intermedio o avanzando de divi es muy probable que ya sepas como realizar un efecto parallax en una sección de divi, pero en este tutorial vamos a ir un paso más allá, vamos a crear una sección con una imagen con efecto parrallax pero a esta sección le vamos a agregar un nuevo efecto que consiste en que al hacer scroll o desplazarnos hacia abajo el fondo con la imagen se va a desvanecer.

Para realizar este efecto solo vamos a necesitar el código jquery que te dejo a continuación:

jQuery(document).ready(function( $ ) {
  $(window).scroll(function(){
  $('.et_parallax_bg').css("opacity", 1 - $(window).scrollTop() / 500)
  });
});

Este código lo vamos a insertar en un módulo código en la página que deseemos el efecto. Recuerda que el código debe ir dentro de las etiquetas <script> Aquí el código </script>

Si quieres que el efecto parallax funcione en móvil aquí tienes otro fragmento de código jQuery. El autor del código es Ed Solman por si quieres agradecerle. Este código te recomiendo pegarlo en Opciones del tema divi / Integración / Agregar código al head de su blog. Recuerda que el código debe ir dentro de las etiquetas <script> Aquí el código </script>

jQuery(document).ready(function($) {
  // Mobile device check
  $is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
  if ($is_mobile_device) {
    // Function to check if an element is in the Viewport
    isInViewport = function(elem) {
        elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
        return elementBottom > viewportTop && elementTop < viewportBottom;
    };
    // Apply Parallax transform calculations when scrolling
    $(window).scroll(function() {
        $(".et_parallax_bg").each(function() {
           var $this_parent = $(this).parent();
           // Check if the parent element is on-screen
           var $is_visible = isInViewport($this_parent);
           if ($is_visible) {
             element_top = $this_parent.offset().top,
             parallaxHeight = $(this).parent(".et_pb_fullscreen").length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
             bg_height = .3 * $(window).height() + parallaxHeight,
             main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";
             $(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});
           }
        });
    });
  }
});

Bueno no te quito más tu tiempo y mejor dale play al video para que aprendas a realizar este ejercicio parallax con divi…

Tutoriales Relacionados

14 Comentarios

  1. jose felix

    Hola buenas tardes, he tenido un problema mientras realizaba Efecto Parallax Divi, sé que no tiene nada que ver pero soy nuevo en esto y es que todo se me ha hecho más pequeño, los módulos hasta la vista del constructor… no sé que me ocurre. Pido ayuda. Muchísimas gracias

    Responder
    • Oscar Viedma

      Hola José, me puedes pasar el enlace de tu sitio dónde has realizado la práctica? No sé que pueda estar ocurriendo y me gustaría darle un vistazo para poder ayudarte.

      Saludos

      Responder
  2. mauro

    buenos dias amigos , primero que todo muy bueno el tutorial….

    segui todos los pasos pero no logre hacer que funcionara

    Responder
    • Oscar Viedma

      Hola Mauro, debe funcionar amigo. Quizá te está faltando algo, si estás poniendo el código jQuery dentro del script? si estás poniendo la clase CSS correctamente?

      Responder
  3. Violet

    Hola!!! Muchas gracias por el tutorial. Muy bien explicado, me ayudo muchisimo!
    Pero me surge una duda:
    Yo hice el efecto con fondo blanco. No metí el código que indicaste porque quiero que la imagen de fondo me quede estática y quiero que el texto que pasa por encima de la imagen (el fondo del texto) tenga un degradado de blanco a transparente y que mientras bajas la página se pueda ver debajo de la transparencia del fondo del texto la imágen… pero no logro hacerlo.
    No sé si me expliqué bien.
    Gracias y un saludo

    Responder
    • Oscar Viedma

      Hola Violet, muchas gracias. No logro entender bien lo que deseas, Si me muestras la composición que tienes hasta este momento podría darme una mejor idea. 🙂

      Responder
      • Violet

        Hola Oscar,
        gracias por responder tan rápido. Ya consegui hacer el efecto que quería, era simplemente meter una sombra con degradado. Te muestro la página ( está aún sin terminar…) https://elpaseo.eu/
        Tengo otra duda, es posible realizar el efecto parallax con un video?? en vez de que sea una imágen la que está estática sea el video??.

        Mil gracias por tu ayuda.
        un saludo

        Responder
        • Oscar Viedma

          Hola Violet genial por haberlo conseguido 🙂

          También es posible con un video, en lugar de insertar una imagen de fondo debes seleccionar la opción de video y cargar tu video en dos formatos: mp4 y webm.

          Responder
  4. sara

    Buenas, estoy viendo tus videos y este al ser más antiguo no se si ya se podría hacer con la opción de sticky o se sigue haciendo con código¿ gracias y muchas más x tus videos

    Responder
    • Oscar Viedma

      Hola Sara, este efecto en particular todavía debe hacerse con código 😀

      Responder
  5. johan

    hola una pregunta si quiero editar no el fondo si no una parte en especifico como lo haría? muchas gracias muy buenos tutoriales

    Responder
    • Oscar Viedma

      Hola Johan, este efecto de desvanecido al desplazarse solamente es para el fondo. ¿Qué te gustaría editar?

      Responder
  6. Luis Manuel

    Hola Oscar, te escribe Leo, te había comentado por youtube sobre el error que me da al pegar el código en mi web, es una web solo para estudiar tus tutoriales y parender.

    Al copiar el código se pone la foto en negro.

    Responder
    • Oscar Viedma

      Hola Leo, ¿Cuál es el link de tu página? Quiero darle un vistazo.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest