En este tutorial, que digo tutorial ¡SUPER TUTORIAL! vas a aprender a crear un super efecto de «scrolling mouse parallax», bueno, en realidad no sé que titulo ponerle a este efecto, pero consiste en crear un cover o una sección hero con una palabra o frase (insertada con el módulo texto en divi) y esta se mueva de acuerdo al movimiento del mouse o el cursor, es decir, al visualizar el efecto en una pantalla de escritorio (computadora) la frase, palabra, imagen o elemento que insertes se va a mover de acuerdo al movimiento del cursor, y en celulares se moverá de acuerdo al movimiento del teléfono. La realidad es un efecto genial, muy vistoso y elegante que puedes aplicar en tus proyectos.
Para este tutorial vamos a necesitar de una librería de javascript denominada parallax.js, yo te hice la vida más fácil y para insertar de manera correcta la librería en nuestro WordPress he creado un plugin super básico donde he incrustado el código JS de la librería, tú solo tienes que descargarte el plugin e instalarlo, es todo…
DESCARGAR PLUGIN OV PARALLAX JS
También vamos a necesitar de un fragmento de código jquery, aquí te lo dejo para que solo lo copies y pegues…
jQuery(function($){
$( ".nombreClase" ).attr( "data-depth", "0.8" );
var parallaxMouseScroll = $('#nombreContenedorID').get(0);
var parallaxInstance = new Parallax(parallaxMouseScroll);
});
Cuando utilizo este efecto, al añadir el código, me borra módulos de otras páginas, ¿hay algún truco para especificar que sólo quiero ese efecto en una página o módulo concreto?
Hola Vanesa para que solo funcione en una página inserta el código en un módulo «código». 🙂
No pude hacerlo funcionar dentro de filas «violetas» de Divi, me desaparece todo lo que está en el módulo y el módulo mismo, intenté hasta con otras filas «verdes» y poner el código en un módulo de código y tampoco, será la nueva versión de Divi?
Hola Miguel, me puedes compartir el enlace de tu ejercicio por fa, quiero darle una inspeccionada. 😉
Cuando quiero guardar los cambios en «Agregar código al Head de su blog» nunca termina de guardar los cambios, y no me los toma y se me cae la pagina
Hola Lucas, ¿Tienes algún plugin cache instalado? Me puedes pasar una captura de que error te aparece? por fa.
Hola Oscar a que mail te puedo enviar los prints que me solicitaste, ya que pongo responder al mail que me llego y me lo rebota. Desde ya te agradezco la información. Saludos
Hola Oscar.
Mi divi no tiene opciones de tema y tampoco hay un selector de ID de CSS para la columna.
Mi divi es 4.4.6.
Como puedo hacer?
Hola Joao, para las nuevas versiones entras a los ajustes de la fila / columna / avanzado… 🙂
Hola Oscar, no me funciona este efecto.
Creo que el problema es que con las nuevas versión la forma de implementarlo será diferente.
La sección; Selector de ID CSS para la columna(versiones posteriores) solo sale en los bloques naranjas, verdad?
Implementos dichos cambios pero no me funciona el efecto.
¿podrías hacer el tutorial con la última Versión de DIVI?
Muchísimas gracias de antemano Oscar
Hola Antonio qué tal, en las versiones más recientes de divi para colocar el ID en la columna tienes que dirigirte a los ajustes de la FILA / entrar a la COLUMNA / AVANZADO / y colocar el nombre de ID en IDENTIFICADOR CSS.
Es fácil amigo, lo he realizado y funciona con la versión más reciente de divi. Quedo pendiente.
Un abrazo.
Hola de nuevo Oscar
Es verdad funciona, me equivoqué en algún paso
Lo único es que entra en conflicto con una imagen y con un botón de la secció y hace que se quede desajustado todo.
Creo que la solución es que el texto del efecto quede aislado en un solo cuadro verde.
Te mando las capturas por el correo
Muchas gracias
Hola Antonio creo que no me llegaron las capturas, no sé como vayas con el detalle que comentabas. Un abrazo.
Hola Oscar, te los mandé por el correo por defecto que tienes por el WordPress (pero no me dejaba enviar)
! Lo conseguí mandar hacer el efecto ¡
Mi error fue poner el efecto de las letras con varios elementos, es decir, (a mi entender) hay que aislar las letras un solo Cuadro Verde para que tenga efecto.
Gran trabajo Oscar, muchísimas gracias
Buenas Oscar,
Te sigo con los tutoriales premium pero estoy intentando algo, a ver si me puedes ayudar.
Estoy intentando hacer este efecto https://www.gettala.com/ (el de los hover y que aparecen las tarjetas de colores)
Se podría llegar a conseguir con esta librería, es que me gusta ese efecto y no se si está es la mejor opción .
Hola Sara! Recién ando viendo tu comentario por aquí 😬
Te respondí por facebook 🙂