Фокусный световой эффект Использование jQuery/HTML5

Мне нужно воспроизвести эффект фокуса, который был сделан во вспышке. Вот ссылка. При наведении элементов меню появляется эффект фокуса.

Как это сделать без использования вспышки. Доступны любые плагины? любые советы или образцы в jquery или HTML5 будут полезны.

Благодарю.

1 ответ

Предполагая, что вы хотите, чтобы этот эффект произошел при наведении, мы будем использовать класс "spotlight"

Для создания этой страницы вам понадобится 2 div, и они будут работать только с css3/jquery

Первый div создаст эффект света. Создайте это, используя горизонтальный градиент 3 css css. Каждый из цветов должен быть RGB, поэтому вы можете включить прозрачность. Этот div будет высоким и узким для начала и будет скрыт на странице

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

Когда обнаружено событие наведения, должно произойти несколько вещей:

1-й вам нужно получить позицию элемента, а затем получить позицию верхнего центра браузера. вы будете использовать эти 2 точки для вычисления угла, необходимого для искажения "легкого" div. Затем расположите легкое погружение в верхнем центре браузера с помощью набора перекосов и снимите его. На этом этапе вы будете использовать css-преобразование, смешанное с анимацией jquery, чтобы сделать снизу коробки более широким, чтобы придать вид расширения света пятна.

В то же время это происходит, вам нужно будет поместить поле "свечение" за элементом, а затем оживить его, увеличиваясь по мере того, как свет пятна расширяется.

Затем наведите указатель мыши в обратном порядке и снова спрячьте элементы.

licensed under cc by-sa 3.0 with attribution.