эффект света фонарика на 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>


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

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

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

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

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

27 комментариев:

  1. Ирина, можно сделать найди чёрную кошку в чёрной комнате.

    ОтветитьУдалить
    Ответы
    1. Вот точно, Вика!))) У меня даже такая имеется, кошка в смысле, могу Ирине Михайловне одолжить))).

      Удалить
  2. Ирина, ага. Можно где - нибудь применить.

    ОтветитьУдалить
  3. Прикольно, можно поэкспериментировать! Спасибо!

    ОтветитьУдалить
    Ответы
    1. Елена, попробуй у тебя получится. Поделись потом если сделаешь. Это я на скорую руку выбрала.

      Удалить
  4. Эффект совершенно сказочный! Любуюсь и облизываюсь.

    ОтветитьУдалить
  5. Интересно! Придумать только надо куда его приделать.

    ОтветитьУдалить
    Ответы
    1. Наталья, да иногда в сообщение можно, если по теме.

      Удалить
  6. интересный эффект, для ряда задач многим точно пригодится

    ОтветитьУдалить
    Ответы
    1. Спасибо Семён. Вижу уже, что некоторые читатели пробуют.

      Удалить
  7. подскажите, пожалуйста, что я делаю не так? https://tintebp.blogspot.com/2019/10/blog-post_11.html

    ОтветитьУдалить
  8. K8, в Вашем блоге в шаблоне нет скрипта библиотеки jquery. В статье есть ссылка что такое jquery. Там подробно написано. Если не всё будет понятно обращайтесь.

    ОтветитьУдалить
    Ответы
    1. Заррработало!!© Спасибо огромное за Подсказки!

      Удалить
  9. Конечно заработает. Не зря ведь ссылки в статье даются. Удачи.

    ОтветитьУдалить
  10. K8, это у Вас тестовый или основной блог. А то в меню книжка смотрю все ссылки мои.

    ОтветитьУдалить
  11. Тестовый, пробую/пытаюсь)

    ОтветитьУдалить
    Ответы
    1. Поняла. Правильно делаете что на тестовом экспериментируете.

      Удалить
  12. Вика, подскажите пожалуйста это глюк гугла или что-то другое? захожу на вашу страницу и сверху вот такой зазор joxi.ru/zAN1BdQUvYVW02 . при чем у меня также на главной вроде нет такого зазора (studxelp.ru), а вот заходишь на страницу или сообщения меню вытягивается вниз закрывая часть поста joxi.ru/5mdRndGc3EKWeA У меня браузер гугл

    ОтветитьУдалить
  13. Studxelp, я поняла Вас. Давно за этим наблюдаю. Такое впечатление что Гугл с рекламой играется. подбирает место для размещение. именно тогда и началось у меня, когда они в прошлом месяца новые форматы задумали.
    У вас в коде скрипт от google-tag-manager и у меня.
    почитайте про него https://conversion.im/gid-po-google-tag-manager и тут можно https://pm-ka.com/gde-dolzhen-byit-razmeschen-fragment-google-tag-manager/
    Вообще поюзайте про него.

    ОтветитьУдалить
  14. Валерия, а самой слабо сфоткать и сделать.

    ОтветитьУдалить
    Ответы
    1. Вика, это ж опять надо будет про кошаков писать))). Но эффект классный, игручий).

      Удалить
  15. Да, затягивает смотреть. а про кошек я так, что на ум пришло. Можно загадку типа найди иголку в стоге сена или типа того.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск