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

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

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

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

Вы желаете на фотографию наложить луч света, и код для этой картинки будет выглядеть так:
htmlCOPY
<img id="spector" src="картинка.jpg" alt="моя картинка" />
А в самом низу страницы, где и начинается скрипт, вы дописываете код с нашим придуманным идентификатором spector ( назначается любой, латинскими буквами и без повторений ).
htmlCOPY
<script type="text/jаvascript"> $("#spector").glint({onerror:function(){alert("Ваш браузер не поддерживает Ява скрипт");}}); </script>
Вам будет понятней, когда вы скачаете архив и откроете подготовленный для примера 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 ... - включение оповещения об ошибке.
И например, код для скрипта от моего заголовка с лучом, будет выглядеть так (я только убрал сообщение об ошибке):
htmlCOPY
<script type="text/jаvascript"> $("#spector").glint({horizontal:false, interval:2, pause:7000, size:60, angle:90, density:180}); </script>
Как и писал выше, если эти параметры не вписывать в скрипт, то они будут браться по умолчанию.

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

Ссылка на файл: скачать архив
Дата публикации: 17.08.2018
Комментарии
Сергей
12 июля 2019 09:14
Сергей
Здравствуйте, не подскажите как в скрипте Анимации луча убрать alert "Ваш браузер не поддерживает Ява скрипт"?
Admin
12 июля 2019 09:14
Admin
Добрый день!
Вообще-то это вспомогательная функция ( сообщение ) для тех, у кого выключен в браузере скрипт.
Удалите в двух местах в скрипте между фигурными скобками {...} полностью код:
alert("Ваш браузер не поддерживает Ява скрипт");
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!