Me gustaría crear zonas de desplazamiento específicas en una página web, no una "zona cuadrada". Tengo aquí una bonita imagen de fondo de acuarela y quiero que los usuarios puedan hacer clic en estas zonas.

Una imagen dice más de mil palabras, así que aquí está la imagen de fondo original:

https://i.ibb.co/bQK1MZB/background-home-1080p.png

Y aquí hay una zona en la que me gustaría estar flotando (en rojo):

https://i.ibb.co/ng9dFRc/Sans-titre-2.png

Entonces, ¿cómo puedo definir estrictamente esta zona, por lo que si el usuario se desplaza como 5px fuera de ella, no se desplaza? ¿Es solo CSS?

¡Gracias por tu ayuda! :)

1
sptaule 6 oct. 2019 a las 22:41

1 respuesta

La mejor respuesta

Creo que se puede lograr usando clip-path para una imagen transparente. Como ruta de clip, deberá dibujar gráficos SVG personalizados (en Adobe Illustrator, supongo). Mire este ejemplo: JSFiddle. Aquí, en el ejemplo, utilicé una imagen roja para hacer visible el resultado.

2
Andrew Dashkov 6 oct. 2019 a las 20:30