эффект света фонарика на jQuery

Всем, доброго времени суток. Нашла в интернете в свободном доступе удивительный эффект светящегося фонарика на изображении.  На тёмной страницы в месте нахождения курсора появляется светлый круг, как бы "пятно света от фонарика", который перемещается вслед за движением курсора. Именно в этом "пятне света" становятся видимыми все элементы

Понравилась идея и решила поделиться с вами. Конечно фишка вполне специфическая и не везде её можно применить, но всё же, авось кому и пригодится.

Сам эффект создаётся с помощью радиального градиента (radial-gradient) и  jQuery для движения объекта. Я сделала ещё к этому надпись на картинке в виде ссылки. За ненадобностью можно убрать. Смотрите сам эффект на тестовом блоге

Демонстрация 

Весь код целиком будет выглядеть так

<div class="spotlight-wrap">
<a href="адрес страницы при клике на ссылку">ваш текст</a>
    <br />
<div class="spotlight">
</div>
</div>
<style>.spotlight-wrap {
    background: url(адрес картинки) no-repeat center center;
    background-size: cover;
    height: 500px;
    cursor: none;
    position: relative;
}
.spotlight-wrap a {
    position: absolute;
    z-index: 1;
    bottom: 30px;
    right: 40px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 26px;
    line-height: 34px;
    color: #AAA;
    transition: color 0.5s;
    text-shadow: 0 0 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5); 
}
.spotlight-wrap a:hover {
    color: #FFF;
}
.spotlight-wrap .spotlight {
    position: absolute;
    height: 500px;
    width: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
}</style>
<script>
$(window).mousemove(function(e){
    let w = $('.spotlight').innerWidth(),
    h = $('.spotlight').innerHeight(),
    t = e.pageY - $('.spotlight').offset().top,
    l = e.pageX - $('.spotlight').offset().left;
$('.spotlight').css('background-image', 'radial-gradient(circle at '+ (l / w * 100) +'% '+ (t / h * 100) +'%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)');
});     </script>

Всё что нужно отмечено розовым цветом - ваша картинка и текст.

Вот такой, немного фантастический эффект фонарика, можно создать для изображения.

Всем добра и до встречи.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :