Cerrar video

Cómo crear un increíble efecto de glassmorfismo (glass morphism) con divi

por | Ene 8, 2021 | Tutorial gratuito, Tutorial premium | 6 Comentarios

El Glassmorfismo (Glass Morphism) es un efecto de desenfoque de fondo que crea una sensación o apariencia como si viéramos a través de un cristal. Este efecto de «borrones» transparentes lo podemos ver aplicado en el nuevo sistema operativo de Mac OS Big Sur y iOS y se está convirtiendo en una tendencia para este 2021.

Por tal motivo, para mantenernos en esta tendencia y experimentar un poco más este nuevo estilo de diseño de interfaces, en este tutorial exclusivo de OV DIVI aprenderás a crear este increíble efecto con el constructor visual de divi. No solo vas a aprender a aplicar fondos con desenfoques en los elementos sino que además de esto, aprenderás a insertar formas en movimiento como fondo de secciones y filas, así mismo, te mostraré como implementar un increíble efecto de inclinación al pasar el cursor sobre cualquier módulo.

Cómo crear un increíble efecto de glassmorfismo (glass morphism) con divi

Hay mucho por aprender en este tutorial, así que no esperes más y accede a los tutoriales exclusivos.

ACTUALIZACIÓN: Tutorial liberado gratis para el canal de youtube.

VER TUTORIAL EN YOUTUBE

RECURSOS:
> Descarga los assets y json
> Sitio web Lottie Files
> Tutorial Lottie Files Divi
> Tutorial Tilt.js Divi

CÓDIGOS:

Centrar verticalmente la forma blob:

display: flex;
justify-content: center;

Sincronizar Tilt.js con divi:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

<script>
jQuery(document).ready(function( $ ){
  $('.efecto-tilt').tilt({
    maxTilt: 25,
    perspective: 500,
    scale: 1,
    speed: 300,
    glare: true,
    maxGlare: 0.7,
  });
});
</script>

Código para desenfocar el fondo de los módulos anuncio:

backdrop-filter: blur(3px);

Este tutorial es premium

Accede a éste y más tutoriales exclusivos de la Academia OV DIVI por tan sólo $8.00 USD al mes y saca el máximo provecho del mejor tema y constructor visual para WordPress.

Tutoriales Relacionados

6 Comentarios

  1. CLAUDIO

    esto estuvo GENIAL

    Responder
  2. Edgar

    Me parece excelente, sin embargo tengo un problema al momento de aplicarlo en mi proyecto, ya que esta mas largo y el reflector se ve cortado, es como si el reflector fuese un cuadrado y cuando pasan el cursor salen las esquinas donde ya no alcanza a salir la simulación de espejo y sale cortado.

    Responder
    • Oscar Viedma

      Hola Edgar, ¿Cuál es la url de tu ejercicio? Quiero verlo para saber que sucede amigo.

      Saludos.

      Responder
  3. vutanik

    Hola oscar, espero que estes bien, esta super genial hermano, te cuento que estoy en un proyecto importante y necesito terminarlo ya, pero tengo el problema que al hacer el efecto tilt que dices no me funciona el código lo hice como dices pero no me funciona no se que hice mal o si pasó algo.. me podrías aclarar por favor para ver que solución hay o será dejarlo así y no preocuparme por una solución… de antemano te agradezco, saludos

    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