Эффект освещения фонариком через плагин Spotlight на jQuery
2#: Картинка, к которой будет применён данный эффект, прописывается следующим образом:
Разместил:
Apocalypse
Опубликовано:
1 2 3 4 5 6 |
<script src='/js/spotlight.js'></script> <script> $(function() { $('#test').spotlight(); }); </script> |
1 |
<img src='Ссылка на картинку' width="500" height="300" id='test'> |
Метки: jQuerySpotlightФонарикЭффект
Apocalypse
Я не понял вашего вопроса, но постараюсь на него ответить...
Разместил: Apocalypse
- Apocalypse 2 октября 2015 Last modified 3 октября 2015
Разместил: Apocalypse
- Apocalypse 3 мая 2016
Разместил: Apocalypse
- Apocalypse 18 февраля 2018 Last modified 2 сентября 2018
Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas
Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3
Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews
elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3
Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil
how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas
Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE
@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается
Информация
Пн | Вт | Ср | Чт | Пт | Сб | Вс |
---|---|---|---|---|---|---|
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 |
Я сделал, но фонарик получился квадратным. Как сделать круглым?
Какой браузер используешь? Можно ссылку на страницу, где установлен данный скрипт?
Неправильно разместил предыдущий комментарий. Вот так правильно:
Создал чистую страницу index.html, поставил скрипт с и картинку с сервера данного сайта, а в итоге отображается просто статичная картинка. Что я делаю не так?
Вот код:
Не работает. Подключение библиотеки не повлияло на работоспособность, просто отображается статичная картинка, может другую надо библиотеку подключить?
Перед отправкой я сначала проверил коды у себя
Странно, может ли быть причина в хостинге или в чем либо еще?
Не знаю. Вот залил свой HTML файл на сервер: http://imapo.ru/js/light.html
Та же беда. В приведённом примере пока ссылки абсолютные на imapo - всё нормально. Скачал всё на комп - сразу квадратный фонарь. Нашёл подобное в другом месте. Этот вариант работает и на локалке:
http://spotlightdemo.blogspot.ru/
Не нужно сохранять ДЕМО на свой ПК, так как браузер скачивает "Кастрированную" версию страницы с уже сгенерированным пятном и обрезанной некроссбраузерной версией скрипта
Оригинальный исходник: https://kazpic.kz/images/2018/02/16/Снимок.png
Кастрированный исходник после сохранения браузером: https://kazpic.kz/images/2018/02/16/Снимок2.png
Из-за этого квадратная маска и некорректная работа в IE
А можно увеличить фонарик?
Для этого нужно в файле spotlight.js заменить
На:
Далее там же найти
и после этого вставить:
Далее там же найти
и заменить 75 на 175 (Половина от нового значения 350):
Вот демо: http://jsfiddle.net/L1hy9pgt/
У меня скрипт не работал если его инициализировать на самой HTML странице. А когда инициализация происходила в самом файле spotlight.js Все заработало.
Еще хочу попросить, сделать такой же подобный скрипт с фонариком, но с эффектом освещения 3d. То-есть что бы свет обтекал рисунок. В качестве направления знаю в этом плане лишь несколько вещей. Что картинку нужно добавлять через тег canvas. Так же у картинки создавать карту нормалей(normal map), по скрипту могу лишь ссылку дать.
https://codepen.io/zKevin/pen/LVgLvy
Сам пробовал не смог разобраться. А именно как делать размеры у картинки и прочие размеры где куда задаются, как убрать менюшку в этом скрипте.
В общем просьба сделать или полный обзор на данный скрипт, либо написать подобный, так же с подробным описанием. Заранее благодарен.
К сожалению, пока что нет такого уровня навыков, чтобы объединить два этих скрипта
Понимаю, сам еще очень далек от кодинга.
А еще вопрос. Сможете ваш же фонарик, привязать к мобильному устройству? Имею виду к гироскопу телефона. Предположим фонарик на телефоне изначально по центру экрана, а при наклоне телефона,, что бы фонарик тоже наклонялся. С этой задачей уже голову сломал.
Не видел решения захвата датчика гироскопа для браузера. По ходу, проще сделать такой фонарик в виде приложения на Андроиде, чем лепить такой сомнительный велосипед XD