15 октября 2013
4617
эффект освещения, плагин, jquery

Эффект освещения на JQuery

JQuery
Демонстрация » Скачать »

Существует один интересный эффект в виде освещения. Допустим, у нас есть какой-нибудь темный текст на темном фоне, нужно при наведении на него как то осветить, чтобы он был виден. Для этого и используется эффект освещения, реализованный посредством языка веб программирования JQuery.

 

 

СТРУКТУРА СКРИПТА. Файлы.

 

Всего в основе, как Вы видите лежат 4 файла, которые и составляют полную структуру скрипта для данного примера.

 

  1. index.php
  2. spotlight.js
  3. style.css
  4. spotlight.png

 

 

ШАГ ПЕРВЫЙ. Файл spotlight.js.

 

 

Файл spotlight.js нужен для взаимодействия с кодом в файлах index.php и style.css, у которых есть идентификатор light и класс text_p. Теперь по подробнее о них.

Идентификатор light задается для освещения текста с помощью картинки spotlight.png, которая выполнена в формате png. При использовании движения с помощью оси координат posx, posy в библиотеке Math, осуществляются те самые перемещения по темному фону. На момент задания перемещения придается стиль display: block к идентификатору light. Класс text_p нужен для наведения курсора на текст, а также преобразования его в черный цвет на фоне белого.

 

ШАГ ВТОРОЙ. Файл index.php.

 

Первый тег div с классом text_div нужен для задания цвета фона, цвета символов, а также для ширины и высоты(не обязательно, задавать ширину и высоту, если не задать то черный фон будет на весь экран). Далее идет картинка, о ней уже говорилось выше. Она имеет идентификатор light и работает только при наведении. Второй тег div с классом text_p необходим непосредственно для текста.

 

<div class="text_div">
<img id="light" src="spotlight.png">
<div class="text_p">
<!--Тут будет Ваш текст-->
</div>
</div>

 

ШАГ ТРЕТИЙ. Файл style.css.

 

Ну и стили, без которых данный скрипт работать не будет!

 

#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;
}

 

На этом в принципе все. Спасибо большое за внимание!



Источник материала »