Эффект освещения фонариком через плагин Spotlight на jQuery

63783588


Скачать [RAR] [416 КБ]

Данный плагин позволяет создать очень необычный эффект освещения картинки фонариком

Для начала посмотрите ДЕМО

Установка:

1#: На нужных страницах после /head вставляйте:

2#: Картинка, к которой будет применён данный эффект, прописывается следующим образом:

Осталось лишь залить JS файл из прикреплённого архива в папку js и картинку spotlight.png в папку img

Так же в архив добавлена фоновая картинка из примера, на которой вы можете протестировать скрипт

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

guest
17 Комментарий
Старые
Новые
Межтекстовые Отзывы
Посмотреть все комментарии
Иван Иванов
Участник
Иван Иванов
3 лет назад

Я сделал, но фонарик получился квадратным. Как сделать круглым?

0
Юрий
Участник
Юрий
3 лет назад

Неправильно разместил предыдущий комментарий. Вот так правильно:
Создал чистую страницу index.html, поставил скрипт с и картинку с сервера данного сайта, а в итоге отображается просто статичная картинка. Что я делаю не так?
Вот код:

0
Юрий
Участник
Юрий
3 лет назад
Ответить на  Apocalypse

Не работает. Подключение библиотеки не повлияло на работоспособность, просто отображается статичная картинка, может другую надо библиотеку подключить?

0
Юрий
Участник
Юрий
3 лет назад
Ответить на  Apocalypse

Странно, может ли быть причина в хостинге или в чем либо еще?

0
Игорь
Гость
Игорь
2 лет назад
Ответить на  Apocalypse

Та же беда. В приведённом примере пока ссылки абсолютные на imapo - всё нормально. Скачал всё на комп - сразу квадратный фонарь. Нашёл подобное в другом месте. Этот вариант работает и на локалке:

http://spotlightdemo.blogspot.ru/

0
Иван Иванов
Участник
Иван Иванов
3 лет назад

А можно увеличить фонарик?

0
PLushechka
Участник
PLushechka
3 лет назад

У меня скрипт не работал если его инициализировать на самой HTML странице. А когда инициализация происходила в самом файле spotlight.js Все заработало.

0
PLushechka
Участник
PLushechka
3 лет назад

Еще хочу попросить, сделать такой же подобный скрипт с фонариком, но с эффектом освещения 3d. То-есть что бы свет обтекал рисунок. В качестве направления знаю в этом плане лишь несколько вещей. Что картинку нужно добавлять через тег canvas. Так же у картинки создавать карту нормалей(normal map), по скрипту могу лишь ссылку дать.

https://codepen.io/zKevin/pen/LVgLvy

Сам пробовал не смог разобраться. А именно как делать размеры у картинки и прочие размеры где куда задаются, как убрать менюшку в этом скрипте.
В общем просьба сделать или полный обзор на данный скрипт, либо написать подобный, так же с подробным описанием. Заранее благодарен.

0
PLushechka
Участник
PLushechka
3 лет назад
Ответить на  Apocalypse

Понимаю, сам еще очень далек от кодинга.
А еще вопрос. Сможете ваш же фонарик, привязать к мобильному устройству? Имею виду к гироскопу телефона. Предположим фонарик на телефоне изначально по центру экрана, а при наклоне телефона,, что бы фонарик тоже наклонялся. С этой задачей уже голову сломал.

0
17
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x