Как создать эффект прожектора с помощью HTML и CSS?

Опубликовано: 27 Августа, 2022

В этой статье мы создадим эффект прожектора над изображением при наведении на него курсора. В основном это основано на HTML, CSS и JavaScript. Чтобы создать этот эффект, необходимо выполнить следующие шаги.

Раздел HTML: в этом разделе мы создадим элементы-контейнеры для фонового изображения и указателя мыши. Файлы CSS и JavaScript также связаны здесь.

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>

Раздел CSS: в этом разделе CSS используется для добавления различных типов анимации и эффектов к нашей HTML-странице, чтобы она выглядела интерактивной для пользователей. Сначала сбрасываются эффекты браузера, затем задаются положение и размер изображения и указателя мыши. Свойство filter используется для придания элементам визуальных эффектов. Свойство clip-path используется для преобразования элемента в различные формы.

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);
}

Раздел JavaScript: этот раздел обрабатывает интерактивную часть веб-страницы. Он обнаруживает движение мыши по изображению, используя свойства offsetXandoffsetY для получения координат X и Y. Затем свойство clipPath используется для создания круга для эффекта прожектора.

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)`;
});

Полный код: это комбинация трех вышеуказанных разделов кода.

Выход:

Technical Scripter JavaScript HTML CSS

Как создать эффект прожектора с помощью HTML и CSS?

HTML

CSS

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ