» » Анимация луч света для фото, текста и блока

Анимация луч света для фото, текста и блока

0 682

Анимация луч света

Уважаемые коллеги, в этой статье хочу поделиться с вами со скриптом - красивая анимация луч света, который придаст вашей картинке, тексту (параграфу), или блоку целиком на сайте более изящный и выразительный вид. Ява скрипт совсем не сложный в установке и редактирование, где вы можете по своему вкусу изменить толщину луча, его цвет, скорость и угол направленности.

 

Пример анимации для заголовка

Красивый заголовок с эффектом луча

В заголовке проставлен угол луча света под 90 градусов с размером 60, прозрачностью 170, интервалом 2 и задержкой 7 секунд.

Далее поставим такую же анимацию луча на обыкновенную картинку, и для этого нам достаточно прописать в коде определённый для неё индификатор, а в скрипте мы удалим все параметры для этого id и тем самы оставим значения по умолчанию (угол: 45, скорость: 3, интервал: 10, пауза: 1 секунда, размер: 100, цвет: белый, прозрачность: 100). Смотрите ниже.

Пожалуйста

Теперь перейдём к последнему элементу - это параграф, либо блок, и здесь разницы нет, на что ставить определённый id.

Вы уже должны уяснить, что для элемента на сайте, на который вы хотите наложить анимацию луч света, достаточно прописать для него индификатор, и после имя id указать в скрипте.

А теперь разберём подробно, как сделать такие красивые эффекты для фото и других значимых для вас элементов на вашем сайте, для которых вы хотите сделать анимацию.

Разберём один пример

Вы желаете на фотографию наложить луч света, и код для этой картинки будет выглядеть так:

Код для html
<img id="spector" src="картинка.jpg" alt="моя картинка" />

А в самом низу страницы, где и начинается скрипт, вы дописывете код с нашим придуманным индификатором spector (назначается любой, латинскими буквами и без повторений).

Код для Java
$("#spector").glint({onerror:function(){alert("Ваш браузер не поддерживает Ява скрипт");}});

Вам будет понятней, когда вы скачаете архив и откроете подготовленный для примера index.html в браузере и через блокнот (текстовый редактор).

И последнее, чем хочу поделиться, это параметрами для изменения луча света:

Параметры и значения
  • speed: 3, - скорость движения луча, по умолчанию 3;
  • interval: 10, - интервал движения, по умолчанию 10;
  • pause: 1000, - пауза между прохождением луча, по умолчанию 1 секунда;
  • size: 100, - размеры, по умолчанию 100;
  • r: 255, g: 255, b: 255, - задаёте цвет лучу, по умолчанию белый;
  • angle: 45, - угол направленности луча, по умолчанию 45 градусов;
  • density: 255, - прозрачность луча, по умолчанию 255;
  • horizontal: true, vertical: false, - формирование по горизонтали/вертикали;
  • forward: true, - перемещение луча слева направо по горизонтали и сверху вниз по вертикали, по умолчанию: True;
  • onerror:function(){alert ... - включение оповещения об ошибке.

И например, код для скрипта от моего заголовка с лучом, будет выглядеть так (я только убрал сообщение об ошибке):

Код для Java
$("#spector").glint({horizontal:false, interval:2, pause:7000, size:60, angle:90, density:180});

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

Скачать анимация луч света

Ссылка на файл: luch_sveta.zip 59

Похожие новости