эффект света от фонаря на javascript

Практика 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}`;
            }
        });
0 0 голос
Рейтинг статьи
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Подписаться
Уведомить о
guest
53 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
JanleF
7 месяцев назад

Site Pour Acheter Levitra [url=http://cialibuy.com/#]purchasing cialis online[/url] Propecia Capsulas Cialis Viagra Fertilita

JanleF
7 месяцев назад

Nolvadex Prix Maroc [url=http://cialibuy.com/#]can i buy cialis online[/url] Amoxicillin Causing High Blood Pressure generic cialis no prescription Amoxicilina Amoxi Antibiotic By Money Order Store

Bupbaipt
Bupbaipt
7 месяцев назад

cialis pills dosage https://canadianpharmacystorm.com order viagra new zealand

Bupbaipt
Bupbaipt
7 месяцев назад

anyone order viagra online http://tadmedz.com red pill like viagra

Bupbaipt
Bupbaipt
7 месяцев назад

buy viagra online australia http://cialisxtl.com buy viagra cheap

Arturojep
Arturojep
7 месяцев назад

viagra generic name https://viagrawithoutdoctorspres.com order viagra online us

JimmyGoori
JimmyGoori
7 месяцев назад

buy cialis one a day ed drugs online from canada cheap-generic-viagra.co.uk

RaymondLem
RaymondLem
6 месяцев назад

cheapest cialis pharmacy comparison viagra without a doctor prescription 150 mg how to buy cialis in uk

Harryraw
Harryraw
6 месяцев назад

how can i buy cheap viagra http://aralenph.com – aralen cuanto sale el viagra en uruguay

Harryraw
Harryraw
6 месяцев назад

buy viagra over the counter http://tadal24ph.com – cialis 20 mg best price do i need a prescription to order viagra

Harryraw
Harryraw
6 месяцев назад

viagra without a doctor prescription http://zithazi.com – generic zithromax cialis online buy

Harryraw
Harryraw
6 месяцев назад

what are cialis pills for http://kaletra24.com – cheap kaletra cialis 5 mg

BradleyAnync
BradleyAnync
6 месяцев назад

cheap cialis in australia
generic viagra

BradleyAnync
BradleyAnync
6 месяцев назад

generic viagra buy australia
buy sildenafil

BradleyAnync
BradleyAnync
6 месяцев назад

cheap viagra uk sale
sildenafil

BradleyAnync
BradleyAnync
6 месяцев назад

cheapest cialis in uk
cheap viagra

BradleyAnync
BradleyAnync
6 месяцев назад

cialis pills for sale
generic viagra 100mg

BradleyAnync
BradleyAnync
6 месяцев назад

cheapest cialis au
cheap viagra

BradleyAnync
BradleyAnync
6 месяцев назад

canadian pharmacy generic viagra
viagra pills

BradleyAnync
BradleyAnync
6 месяцев назад

buy viagra york
viagra results

MathewDaups
MathewDaups
6 месяцев назад

low cost cialis
http://cialisxtl.com/ price of cialis

MathewDaups
MathewDaups
6 месяцев назад

cialis coupons printable
http://cialisxtl.com/ cialis before and after

AndrewCig
AndrewCig
6 месяцев назад

viagra pill https://sildenafilprof.com
buy cialis from europe

AndrewCig
AndrewCig
6 месяцев назад

viagra generic availability https://sildenafilprof.com
viagra buy bangalore

Robertorell
Robertorell
5 месяцев назад

canada price on cialis buy viagra cialis

Robertorell
Robertorell
5 месяцев назад
RichardHap
RichardHap
5 месяцев назад

female viagra pills: directions for use of viagra legal buy viagra online

RichardHap
RichardHap
5 месяцев назад

generic viagra available in usa: viagra cialis online buying

MurrayVum
MurrayVum
5 месяцев назад

viagra without a doctor prescription walmart generic viagra without a doctor prescription
onlinepharmacyero.com mexican pharmacy without prescription

MurrayVum
MurrayVum
5 месяцев назад

buy prescription drugs without doctor tadalafil without a doctor’s prescription
onlinepharmacyero.com real cialis without a doctor’s prescription

treantinc
treantinc
5 месяцев назад

Buy Furosemide Tablets [url=https://bbuycialisss.com/]non prescription cialis online pharmacy[/url] Buy Levothyroxine 100mg Buy Cialis Cialis Preis Apotheke Deutschland

MurrayVum
MurrayVum
4 месяцев назад

pain medications without a prescription generic viagra without a doctor prescription
onlinepharmacyero.com comfortis without vet prescription

MurrayVum
MurrayVum
4 месяцев назад

best price for generic viagra on the internet tadalafil without a doctor’s prescription
onlinepharmacyero.com buy prescription drugs from canada

AndrewBog
AndrewBog
4 месяцев назад

canada cialis cialis tadalafil

AndrewBog
AndrewBog
4 месяцев назад

current cost of cialis 5mg cvs cheapest cialis web prices

RobertoLem
RobertoLem
4 месяцев назад

sildenafil citrate generic viagra 100mg viagra overnight

RobertoLem
RobertoLem
4 месяцев назад

cheap viagra buy viagra online

Michaelnatty
Michaelnatty
4 месяцев назад
Michaelnatty
Michaelnatty
4 месяцев назад

viagra on line generic viagra pills

Michaelnatty
Michaelnatty
4 месяцев назад

viagra prices viagra side effects

Gabrieldak
Gabrieldak
4 месяцев назад

real cialis without a doctor prescription: generic cialis tadalafil 20mg

Gabrieldak
Gabrieldak
4 месяцев назад

side effects for cialis: buy cialis online

DanielEntex
DanielEntex
4 месяцев назад

ed pills over the counter best ed pills

LesterRuild
LesterRuild
3 месяцев назад

viagra online viagra pills

RobertEpiva
RobertEpiva
3 месяцев назад

buy wellbutrin online wellbutrin canada

RobertEpiva
RobertEpiva
3 месяцев назад
RobertEpiva
RobertEpiva
3 месяцев назад
GregoryNup
GregoryNup
3 месяцев назад

where to buy cbd oil: best hemp oil for pain

GregoryNup
GregoryNup
3 месяцев назад
RobertFatly
RobertFatly
3 месяцев назад

organic cbd oil: cbd oil for sale walmart