El efecto de seguimiento (efecto de foco) es un efecto que se puede implementar fácilmente usando jQuery. El efecto es bastante popular para el diseño de banner frontal o de apertura para cualquier sitio web.
Enfoque: El enfoque es usar círculo CSS en el efecto de movimiento del mouse usando la función mousemove() proporcionada por jQuery.
Código HTML: El código HTML se utiliza para diseñar la estructura básica del cuerpo. En esta sección, usaremos una etiqueta <div> que se envuelve dentro de una etiqueta <section>.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Split Effect</title> </head> <body> <section> <div class="geeks"></div> </section> </body> </html>
Código CSS: La propiedad CSS se utiliza para establecer el estilo de la imagen.
CSS
<style>
body {
margin: 0;
padding: 0;
}
section {
background: url(geeks.png);
position: relative;
width: 100%;
height: 100vh;
background-size: cover;
}
.geeks {
position: absolute;
width: 100%;
height: 100%;
}
</style>
Código jQuery: hemos utilizado la función mousemove() para rastrear el movimiento del mouse y aplicar el efecto de acuerdo con el movimiento del cursor. Para crear un círculo, simplemente use un degradado radial junto con los puntos X e Y que son básicamente la ubicación del cursor y brindan un radio del 30 % para la redondez. No olvides aplicar este CSS a la etiqueta div.
javascript
<script>
$(document).mousemove(function (e) {
var X = e.pageX;
var Y = e.pageY;
$(".geeks").css(
"background",
"radial-gradient(circle at " +
X +
"px " +
Y +
"px, transparent, #000 30%)"
);
});
</script>
Código completo: en esta sección, combinaremos las tres secciones de código anteriores (HTML, CSS y jQuery) para crear un efecto de seguimiento.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Split Effect</title>
<script src="https://code.jquery.com/jquery-3.4.1.js">
</script>
<style>
body {
margin: 0;
padding: 0;
}
section {
background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png);
position: relative;
width: 100%;
height: 100vh;
background-size: cover;
}
.geeks {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<section>
<div class="geeks"></div>
</section>
<script>
$(document).mousemove(function (e) {
var X = e.pageX;
var Y = e.pageY;
$(".geeks").css(
"background",
"radial-gradient(circle at " +
X +
"px " +
Y +
"px, transparent, #000 30%)"
);
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA