Существует один интересный эффект в виде освещения. Допустим, у нас есть какой-нибудь темный текст на темном фоне, нужно при наведении на него как то осветить, чтобы он был виден. Для этого и используется эффект освещения, реализованный посредством языка веб программирования JQuery.
Всего в основе, как Вы видите лежат 4 файла, которые и составляют полную структуру скрипта для данного примера.
Файл spotlight.js нужен для взаимодействия с кодом в файлах index.php и style.css, у которых есть идентификатор light и класс text_p. Теперь по подробнее о них.
Идентификатор light задается для освещения текста с помощью картинки spotlight.png, которая выполнена в формате png. При использовании движения с помощью оси координат posx, posy в библиотеке Math, осуществляются те самые перемещения по темному фону. На момент задания перемещения придается стиль display: block к идентификатору light. Класс text_p нужен для наведения курсора на текст, а также преобразования его в черный цвет на фоне белого.
Первый тег div с классом text_div нужен для задания цвета фона, цвета символов, а также для ширины и высоты(не обязательно, задавать ширину и высоту, если не задать то черный фон будет на весь экран). Далее идет картинка, о ней уже говорилось выше. Она имеет идентификатор light и работает только при наведении. Второй тег div с классом text_p необходим непосредственно для текста.
<div class="text_div"> <img id="light" src="spotlight.png"> <div class="text_p"> <!--Тут будет Ваш текст--> </div> </div>
Ну и стили, без которых данный скрипт работать не будет!
#light {
z-index:1;
position:fixed;
display:none;
}
.text_div
{
width: 500px;
height: 400px;
background-color:black;
color:white;
}
.text_p {
position:relative;
z-index:3;
}
На этом в принципе все. Спасибо большое за внимание!