Скрипт слайд-анимации ссылок
Скрипты
Скрипт слайд-анимации ссылокПредположим, есть сайт. В нем много текста, удобный дизайн, но при этом он не привлекает внимания. Предлагаю оживить страничку следующим скриптом. Его задача - сделать ссылки на сайте анимированными. Анимация ссылок будет в стиле смены слайдов снизу вверх при наведении на них указателя мыши, и обратной анимации при уходе мыши со ссылки.
Для удобства использования скрипт реализован в стиле jQuery плагина. Поэтому, анимацию можно ограничить, скажем, определенным участком страницы. Все зависит от того, какой селектор вы используете. Я назвал плагин linkanimate1.jquery.js.
Подключить скрипт к страницу довольно просто. Для начала подключим к странице библиотеку jQuery и сам плагин. Заранее проверьте, подключен ли jQuery к странице вашей системой управления сайтами (зачастую, по-умолчанию подключен на uCoz). Если jQuery уже подключен, то достаточно будет ниже его подключения присоединить к странице только плагин.
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery/linkanim1/linkanimate1.jquery.js"></script>
Подготовка сделана, теперь создадим блок, в котором будут анимированные ссылки. Для примера, список (хорошо будет смотреться на менюшках):
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
<li><a href="#">Пункт 5</a></li>
</ul>
Теперь вызовем функцию запуска плагина слайд-анимации:
$(document).ready(function(){
$('#animatelinks a').linkanimate1({
speed: 300,
astart: true,
hclass: 'ahover',
dclass: 'adefault'
});
});
</script>
В функции определены следующие параметры:
- speed - Числовое значение. Скорость анимации, задается в миллисекундах.
- astart - логическое значение. Если установлено значение true, то во время загрузки страницы ссылки анимируются. Если значение false, то анимации при загрузке страницы не будет.
- hclass - текстовое значение. Определяет класс ссылки, когда на нее наведен курсор (можно задать, скажем, фон через CSS).
- dclass - текстовое значение. Определяет класс ссылки в состоянии покоя.
Рабочий пример работы скрипта слайд-анимации ссылок:
Ссылки в этом блоке анимированные. Например, вот эта ссылка. Подведите на нее курсор.
Также, могут быть анимированы ссылки в списках:
Категорически не рекомендую использовать скрипт для анимации ВСЕХ ссылок на странице. Могут произойти неожиданные глюки и торможения. Лучше использовать скрипт для ограниченного пространства со ссылками. Например, для менюшек.
Если будут критика или предложения, то мы вас выслушаем и постараемся ответить.
Много в мире хорошего. Надеюсь этот скрипт тоже отнесут к хорошему.
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Скрипт слайд-анимации ссылок
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 8454 |
| Рейтинг: | 4.3/12 |
| Дата добавления: | 2011-10-25 13:26, Вторник |
| Добавил: | Szen |
| Теги: | ссылки, анимация, слайд |
Рекомендуем
Дополнительно к Скрипт слайд-анимации ссылок
Мини-форум
| № 0 | 2011-10-25 13:26 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт слайд-анимации ссылок". |
| Гость |
