Animated Background: Three + Vanta FOG v2
Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL. En este ejemplo, se combina Three.js con Vanta.js (una librería ligera para efectos animados) para generar un fondo animado llamado Vanta FOG v2, que simula niebla interactiva en 3D.
HTML+Javascript
Animated Background: Three + Vanta FOG v2
Three.js es una biblioteca de JavaScript que permite crear gráficos 3D en el navegador de manera eficiente, usando WebGL. En este ejemplo, se combina Three.js con Vanta.js (una librería ligera para efectos animados) para generar un fondo animado llamado Vanta FOG v2, que simula niebla interactiva en 3D.
CSS
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
color: #333;
background-color: #f0f0f0;
height: 100%;
}
#vanta-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.container {
margin: 0 auto;
padding: 2rem;
position: absolute;
font-family: 'Roboto', sans-serif;
color: #FFF;
max-width: 1200px;
z-index: 1;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 10px;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: background-color 0.3s;
&:hover {
background-color: #25902950;
}
&:active {
background-color: #292990CC;
}
}
El efecto Vanta FOG utiliza la potencia de Three.js para renderizar elementos gráficos 3D directamente en el navegador, permitiendo efectos visuales llamativos sin necesidad de plugins o aplicaciones adicionales.
En el código mostrado:
- Se define un área (
div
) donde se aplicará el fondo animado. - Con CSS, se estilizan los textos y el contenedor.
- Con JavaScript, se utiliza Vanta.js para controlar los colores y la frecuencia de los movimientos de la niebla con Three.js.