Cerrar video

Crear efecto text scrolling mouse parallax en divi

por | Nov 27, 2018 | Tutorial gratuito | 16 Comentarios

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);
});

Tutoriales Relacionados

16 Comentarios

  1. Vanesa

    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?

    Responder
    • Oscar Viedma

      Hola Vanesa para que solo funcione en una página inserta el código en un módulo «código». 🙂

      Responder
  2. Miguel

    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?

    Responder
    • Oscar Viedma

      Hola Miguel, me puedes compartir el enlace de tu ejercicio por fa, quiero darle una inspeccionada. 😉

      Responder
  3. Lucas

    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

    Responder
    • Oscar Viedma

      Hola Lucas, ¿Tienes algún plugin cache instalado? Me puedes pasar una captura de que error te aparece? por fa.

      Responder
  4. Lucas

    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

    Responder
  5. joao

    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?

    Responder
    • Oscar Viedma

      Hola Joao, para las nuevas versiones entras a los ajustes de la fila / columna / avanzado… 🙂

      Responder
  6. ANTONIO

    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

    Responder
    • Oscar Viedma

      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.

      Responder
      • ANTONIO

        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

        Responder
        • Oscar Viedma

          Hola Antonio creo que no me llegaron las capturas, no sé como vayas con el detalle que comentabas. Un abrazo.

          Responder
          • Antonio

            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

  7. sara

    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 .

    Responder
    • Oscar Viedma

      Hola Sara! Recién ando viendo tu comentario por aquí 😬

      Te respondí por facebook 🙂

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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.

$8 USD / mes

Pin It on Pinterest