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…
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
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
buenos dias amigos , primero que todo muy bueno el tutorial….
segui todos los pasos pero no logre hacer que funcionara
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?
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
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. 🙂
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
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.
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
Hola Sara, este efecto en particular todavía debe hacerse con código 😀
hola una pregunta si quiero editar no el fondo si no una parte en especifico como lo haría? muchas gracias muy buenos tutoriales
Hola Johan, este efecto de desvanecido al desplazarse solamente es para el fondo. ¿Qué te gustaría editar?
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.
Hola Leo, ¿Cuál es el link de tu página? Quiero darle un vistazo.