En este artículo, vamos a crear un efecto de foco sobre la imagen cuando pasemos el cursor sobre ella. Esto se basa principalmente en HTML, CSS y JavaScript. Se deben seguir los siguientes pasos para crear este efecto.
Sección HTML: en esta sección, crearemos elementos contenedores para la imagen de fondo y el puntero del mouse. Los archivos CSS y JavaScript también están vinculados aquí.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="index.js"></script> </head> <body> <h1> Hover mouse over the image to get spotlight effect </h1> <div class="main_box"> <div class="img"></div> <div class="mouse"></div> </div> </body> </html>
Sección CSS: En esta sección, CSS se utiliza para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para los usuarios. Primero se restablecen los efectos del navegador, luego se configuran la posición y el tamaño de la imagen y el puntero del mouse. La propiedad de filtro se utiliza para dar efectos visuales al elemento. La propiedad clip-path se usa para convertir el elemento en diferentes tipos de formas.
CSS
/* Resetting the browser stylesheet */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden;
background-color: #000;
color: #fff;
}
/* Styling the heading */
h1 {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
/* Position the mouse pointer and
the background image */
.main_box,
.img,
.mouse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_box {
cursor: none;
margin-top: 3em;
}
.img,
.mouse {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* Reduce the brightness of the image */
.img {
filter: brightness(10%);
}
/* Make a circle with the clip-path
property for the spotlight in the effect */
.mouse {
clip-path: circle(5em at 0, 0);
}
Sección de JavaScript: esta sección maneja la parte interactiva de la página web. Detecta el movimiento del mouse sobre la imagen utilizando las propiedades offsetX y offsetY para obtener las coordenadas X e Y. La propiedad clipPath luego se usa para crear un círculo para el efecto de foco.
Javascript
// Select the container box and the mouse placeholder
let main = document.querySelector('.main_box');
let mouse = document.querySelector('.mouse');
// Add an event listener for detecting
// the movement of the mouse
main.addEventListener('mousemove',
(e) => {
// Use a circle with a clipPath
// and the offsetX and offsetY property
mouse.style.clipPath =
`circle(10em at ${e.offsetX}px ${e.offsetY}px)`;
});
Código completo: es la combinación de las tres secciones de código anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Resetting the browser stylesheet */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
overflow: hidden;
background-color: #000;
color: #fff;
}
/* Styling the heading */
h1 {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
/* Position the mouse pointer and
the background image */
.main_box,
.img,
.mouse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main_box {
cursor: none;
margin-top: 3em;
}
.img,
.mouse {
background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* Reduce the brightness of the image */
.img {
filter: brightness(10%);
}
/* Make a circle with the clip-path property
for the spotlight in the effect */
.mouse {
clip-path: circle(5em at 0, 0);
}
</style>
</head>
<body>
<h1>
Hover mouse over the image
to get spotlight effect
</h1>
<div class="main_box">
<div class="img"></div>
<div class="mouse"></div>
</div>
<script>
// Select the container box and the
// mouse placeholder
let main = document.querySelector('.main_box');
let mouse = document.querySelector('.mouse');
// Add an event listener for detecting
// the movement of the mouse
main.addEventListener('mousemove',
(e) => {
// Use a circle with a clipPath
// and the offsetX and offsetY property
mouse.style.clipPath =
`circle(10em at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA