LightDark
Introducción
Se busca replicar un efecto de cursor con gotas de agua que magnifica el fondo de la página web, similar al visto en este sitio web. Este artículo proporciona una solución para implementar el efecto utilizando HTML, CSS y JavaScript.
Código de Implementación
HTML
La estructura HTML incluye múltiples divs con la clase "circle" que representan las gotas de agua del cursor.
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="https://stackoverflow.com/questions/79505138/dropplet.css">
</head>
<body>
<div class="circle"></div>
...
<div class="circle"></div>
<script src="dropplet.js"></script>
</body>CSS
El estilo CSS define la apariencia del fondo y las gotas de agua, usando gradientes y un diseño responsivo para el efecto.
body {
width: 100%;
min-height: 100vh;
position: relative;
background-image: linear-gradient(
#553c9a 0%,
#553c9a 20%,
#b393d3 20%,
#b393d3 40%,
#553c9a 40%,
#553c9a 60%,
#b393d3 60%,
#b393d3 80%,
#553c9a 80%,
#553c9a 100%
);
background-size: cover;
background-attachment: fixed;
}
.circle {
height: 75px;
width: 75px;
border-radius: 75px;
position: fixed;
background-color: black;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
}JavaScript
El código JavaScript maneja el movimiento de las gotas y la animación del efecto. La lógica permite que cada círculo siga el mouse y que implemente suavemente el efecto deseado.
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");
circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});
window.addEventListener("mousemove", function(e){
coords.x = e.clientX;
coords.y = e.clientY;
});
function animateCircles() {
let x = coords.x;
let y = coords.y;
let speed = 0.8;
circles.forEach(function (circle, index) {
circle.style.left = x - 20 + "px";
circle.style.top = y - 20 + "px";
circle.x = x;
circle.y = y;
circle.style.scale = ((1.5 - 1) * (index - 1) / (20 - 1)) + 1;
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * speed;
y += (nextCircle.y - y) * speed;
});
requestAnimationFrame(animateCircles);
}
animateCircles();Solución del Problema
Para lograr el efecto de magnificación/distorsión de la imagen de fondo dentro de las gotas de agua, se puede utilizar una combinación de filtros CSS y la técnica de clipping. Aquí hay un ejemplo simple para aplicar un efecto de "filtro de desenfoque" en la clase circle:
- Agregar Filtros CSS: Modificar el CSS para incluir un filtro de desenfoque.
.circle {
...
filter: blur(15px);
background: url('ruta/a/la/imagen-de-fondo.jpg') no-repeat center;
background-size: cover;
}- Ajustar las Magnitudes: Jugar con los tamaños y los valores de desenfoque para obtener el efecto visual deseado.
Conclusión
Con esta guía, se puede crear un efecto de cursor que simule gotas de agua con un fondo magnificado y distorsionado, utilizando HTML, CSS y JavaScript. Se recomienda experimentar con los parámetros para personalizar el efecto según sea necesario.