Анимация для сайта средствами JQuery

0
23
Анимация для сайта средствами JQuery
Анимация для сайта средствами JQuery

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

Для того чтобы подключить скрипт к своему блогу (сайту), скачайте архив:

В архиве находятся два скрипта: jquery.animate-colors-min.js и jquery.animateColorText.js.

Все что вам нужно сделать, это подключить библиотеку JQuery к своему сайту (если она уже подключена, то делать этого не стоит), а также вывести наши скрипты.

Заливаем их в папку со скриптами вашей темы, у меня это папка js.

Теперь откройте для редактирования файл header.php и между тегами head вставьте следующий код:

<script type=»text/JavaScript» src=»ПУТЬ К ПАПКЕ/js/jquery.animate-colors-min.js»></script>
<script type=»text/JavaScript» src=»ПУТЬ К ПАПКЕ/js/jquery.animateColorText.js»></script>
Таким образом мы подключили скрипты. Давайте проверим их работоспособность. Для того, чтобы выбранный вами текст начал моргать, к нему необходимо добавить класс: class=»color-animate».

Если текст начал анимировать, значит все в порядке. Ну а если нет, тогда у вас не подключена библиотека JQuery (либо установлена старая версия), а также могли допустить ошибки при подключении самих скриптов. Поэтому будьте внимательны при указании полного пути к скриптам. Это наиболее частые ошибки, так что обратите внимание.

Теперь разберем настройки анимирования. Открываем для редактирования скрипт jquery.animateColorText.js и в самом его низу видим следующие строки:

$(function (){
$(‘.color-animate’).animateColorText({
speed : 5000,
delay : 500,
colorTo : ‘#ff0000’
});
Где speed и delay — скорость моргания, значения которых вы можете менять на свой вкус.

colorTo — цвет, на который будет меняться текст.

Вот в общем то и все настройки. Кроме того, вы также можете добавлять неограниченное количество новых классов с разными настройками, делается это вот так:

$(function (){
$(‘.color-animate’).animateColorText({
speed : 5000,
delay : 500,
colorTo : ‘#ff0000’
});
$(‘.color-animate2’).animateColorText({
speed : 1000,
delay : 500,
colorTo : ‘#ff0000’
});
$(‘.color-animate3’).animateColorText({
speed : 1500,
delay : 1500,
colorTo : ‘#ff0000’
});
});

Комментарии:

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here