Данный эффект основан на радиальном градиенте CSS с использованием jQuery для движения.
Пример:
HTML:
1 2 3 4 |
<div class="spotlight-wrap"> <a href="#link">Ссылка, текст<br/>или другая информация</a> <div class="spotlight"></div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.spotlight-wrap { background: url(background.jpg) 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)); } |
jQuery:
1 2 3 4 5 6 7 |
$(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)'); }); |
Если необходимо передвигать фонарик за мышью при скролинге, то используем этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
let xMouse = -300, yMouse = -300, lastScrolledLeft = 0, lastScrolledTop = 0; $(window).mousemove(function(e){ updateSpotlight(e); MousePosition(e); }); function updateSpotlight(e, x, y) { let w = $('.spotlight').innerWidth(), h = $('.spotlight').innerHeight(), t = e.pageY - $('.spotlight').offset().top, l = e.pageX - $('.spotlight').offset().left; x = x || l; y = y || t; $('.spotlight').css('background-image', 'radial-gradient(circle at '+ (x / w * 100) +'% '+ (y / h * 100) +'%, transparent 80px, rgba(0, 0, 0, 0.8) 120px)'); } function MousePosition(e){ xMouse = e.pageX - $('.spotlight').offset().left; yMouse = e.pageY - $('.spotlight').offset().top; } $(window).scroll(function(e) { if(lastScrolledLeft != $(document).scrollLeft()){ xMouse -= lastScrolledLeft; lastScrolledLeft = $(document).scrollLeft(); xMouse += lastScrolledLeft; } if(lastScrolledTop != $(document).scrollTop()){ yMouse -= lastScrolledTop; lastScrolledTop = $(document).scrollTop(); yMouse += lastScrolledTop; } updateSpotlight(e, xMouse, yMouse); }); |
Добрый день, подскажите пожалуйста, как установить этот скрипт на Tilda, у меня не получилось
А на каком именно этапе не получилось?
На констуркторах очень много ограничений. С тильдой не знаком, даже незнаю, есть ли там jQuery.
Если есть и можно встроить свой HTML на страницу, то вставляем его, затем CSS
А jQuery вставляем куда нибудь в подвал, где счетчики (на конструкторах обычно только туда можно вставить свой JS)
там можно загружать скрипты и фото только кодом, без файлов, через script /script
а для jQuery тоже такой тег нужно ставить?
я в коде не зазбираюсь и даже не понимаю куда адрес картинки нужно прописать) вот сюда код добавила http://ecocandles.tilda.ws/page18968873.html
Адрес картинки в CSS, а у вас в HTML стоит тегом img
На этой странице вообще CSS не вижу с примера.
Добрый день!
Пытался вставить код в редимаг, но почему-то не работает эффект. Можете подсказать, какие возможны причины?
Без ссылки на результат или ошибку -даже не представляю...