Практика JavaScript: эффект света от фонаря.

Всем привет сегодня я вам покажу как можно создать эффект подсвечивания контента. При передвижение мыши по экрану будет создаваться иллюзия свечения фонарём. Это очень простой эффект, всего 2 HTML элемента, в 10 строк JavaScript кода и 10 строк CSS стилей.

Данный эффект я подсмотрел на сайте codepen, у пользователя с ником George W. Park — https://codepen.io/GeorgePark/pen/ELemzZ

Первым делом прописываем базовую разметку.

HTML

В HTML разметку добавляем новый div с кастомным классом, в моём случае это spotlight. Больше в HTML прописывать не чего не надо, мы будем работать только с созданным элементом и с элементом body.

<div class="spotlight"></div>

CSS

Теперь давайте стилизуем наши элементы.

Элементу body я пропишу установлю заранее подготовленный фон. Укажу размеры фона, чтобы он растягивался во всю ширину. С помощью свойства overflow отключу прокрутку.  Задам высоту экрана и отключу курсор.

В моём случае я использую элемент body в качестве контейнера, вы же можете прописать для этого любой элемент, пропирать ему стили и положить во внутрь элемент spotlight.

Для созданного элемента, spotlight, я пропишу стили для позиционирования, задам высоту и ширину, а так же задам фон в виде градиента.

body {
  background: url(00-horror-movie-villains-collage.jpg);
  background-size: cover;
  overflow: hidden;
  height: 100vh;
  cursor: none;
}
.spotlight {
   position: absolute;
   height: 100%;
   width: 100%;
   background-image: radial-gradient( circle, transparent 160px, rgba(0, 0, 0, 0.85) 200px);
}

JavaScript

Первая переменная получает элемент spotlight.

Вторая переменная получает строку со стилями для эффекта света. Здесь вы можете изменить размер окружности, а так же увеличить или уменьшить прозрачность и цвет области затемнения.

Пропишем обработчик событий для элемента window. Обработчик будет выполнять функцию по событию DOMContentLoad, после полной подгрузки элемента. Внутри мы прописываем новый обработчик, который будет реагировать на движение мыши. В качестве параметра мы передаем функцию, которую создадим ниже.

Ниже мы создаем функцию которая будет в зависимости от координат курсора менять градиен фона.

С помощью конструкции spotlight.style.backgroundImage мы изменяем стили заднего фона. Мы указываем что у нас используется radial-gradient и передаем ему параметры указывая что он должен быть круглый. Далее мы указываем его координаты.

Метод  pageX получает расстояние от левой границы до курсора. Это значение мы делим на значение метода innerWidth, который получает значение ширины элемента с учетом внутренних отступов, в нашем случает это элемент window. И полученный результат мы умножаем на 100%.  Таким образом мы получаем X координату нашего элемента. Использую подобную формулу получим Y координату нашего элемента. В конце передаем значение из переменной где мы указывали вид нашей подсвечиваемой окружности.

var spotlight = document.querySelector('.spotlight');
        var spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.95) 200px)';
        
        window.addEventListener("DOMContentLoaded", () => {
            window.addEventListener('mousemove', e => updateSpotlight(e));

            function updateSpotlight(e) {
                spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
            }
        });