Efecto de desplazamiento de tarjeta Glassmorphism

Glassmorphism es una forma moderna de diseñar elementos web de cualquier página web y proporcionar un efecto 3D y de vidrio. Este efecto de animación se puede generar fácilmente usando HTML, CSS y Vanilla-tilt JS. Podemos implementar Glassmorphism usando varias propiedades CSS. Se usa para agregar un efecto de vidrio al elemento dado y Vanilla-tilt JS se usa para proporcionar un efecto de inclinación a la tarjeta.

Instalación:

  • Antes de continuar, primero debemos instalar el módulo vanilla-tilt, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta SRC o también puede ejecutar este comando en la terminal de Visual Studio Code en su carpeta de proyecto .
    npm install vanilla-tilt
  • Vanilla-tilt JS también se puede usar usando su CDN.

    https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

Código HTML: En este apartado realizaremos la maquetación de la tarjeta.

índice.html

HTML

<!DOCTYPE html>
<html>
  
<body>
    <div class="gfg">
        <div class="card">
            <div class="content">
                <h2>GeeksforGeeks</h2>
                <h3>Welcome</h3>
                <p>
                    Learn Data Structures Online At 
                    Your Own Pace With The Best Of 
                    Faculty In The Industry. The Best 
                    Data Structures Course Available
                    Online From Skilled And Experienced 
                    Faculty.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

Código CSS: En esta sección, usaremos algunas propiedades CSS para diseñar la Tarjeta.

índice.css

HTML

<style>
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        
    }
  
    body{
        display:flex;
        justify-content:center;
        align-items:center;
        min-height:100vh;
        background:green;
    }
  
    .gfg{
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
        max-width:1000px;
        flex-wrap:wrap;
        z-index:1;
    }
       
    .gfg .card{
        position:relative;
        width:300px;
        height:300px;
        margin:60px;
        box-shadow:20px 20px 50px rgb(0,0,0,0.4);
        border-radius:15px;
        background:rgba(255,255,255,0.1);
        overflow:hidden;
        display:flex;
        justify-content:center;
        align-items:center;
        backdrop-filter:blur(6px);
    }
  
    .gfg .card .content{
        padding:40px;
        text-align:center;
        
    }
</style>

Código JavaScript: en esta sección, usaremos Vanilla-tilt JS para proporcionar un efecto de inclinación a la tarjeta.

guión.js

Javascript

<script>
    VanillaTilt.init(document.querySelector(".card"), {
        max: 40,
        speed: 800,
        glare:true,
        "max-glare":2.5,
    });
</script>

Código completo: en esta sección, combinaremos las tres secciones anteriores para crear un efecto Glassmorphism.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
  
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: green;
        }
  
        .gfg{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1000px;
            flex-wrap: wrap;
            z-index: 1;
        }
           
        .gfg .card{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 60px;
            box-shadow: 20px 20px 50px rgb(0,0,0,0.4);
            border-radius: 15px;
            background: rgba(255,255,255,0.1);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(6px);
        }
  
        .gfg .card .content{
            padding: 40px;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <div class="gfg">
        <div class="card">
            <div class ="content">
                <h2>GeeksforGeeks</h2>
                <h3>Welcome</h3>
                <p>
                    Learn Data Structures Online At Your 
                    Own Pace With The Best Of Faculty In 
                    The Industry. The Best Data Structures 
                    Course Available Online From Skilled 
                    And Experienced Faculty.
                </p>
            </div>
        </div>
    </div>
    <script src="vanilla-tilt.js">
    </script>
      
    <script>
        VanillaTilt.init(document.querySelector(".card"), {
          max: 40,
          speed: 800,
          glare: true,
          "max-glare": 2.5,
        });
    </script>
</body>
    
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por ritikumariupadhyay24 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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