Скрипт слайд-анимации ссылок

Скрипты

Рисунок Скрипт слайд-анимации ссылок
Скрипт слайд-анимации ссылок Скрипт слайд-анимации ссылок
оценка: 4.3 из 5
оценок: 12

Предположим, есть сайт. В нем много текста, удобный дизайн, но при этом он не привлекает внимания. Предлагаю оживить страничку следующим скриптом. Его задача - сделать ссылки на сайте анимированными. Анимация ссылок будет в стиле смены слайдов снизу вверх при наведении на них указателя мыши, и обратной анимации при уходе мыши со ссылки.

Для удобства использования скрипт реализован в стиле jQuery плагина. Поэтому, анимацию можно ограничить, скажем, определенным участком страницы. Все зависит от того, какой селектор вы используете. Я назвал плагин linkanimate1.jquery.js.

Подключить скрипт к страницу довольно просто. Для начала подключим к странице библиотеку jQuery и сам плагин. Заранее проверьте, подключен ли jQuery к странице вашей системой управления сайтами (зачастую, по-умолчанию подключен на uCoz). Если jQuery уже подключен, то достаточно будет ниже его подключения присоединить к странице только плагин.

Code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery/linkanim1/linkanimate1.jquery.js"></script>

Подготовка сделана, теперь создадим блок, в котором будут анимированные ссылки. Для примера, список (хорошо будет смотреться на менюшках):

Code
<ul id="animatelinks">
  <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>

Теперь вызовем функцию запуска плагина слайд-анимации:

Code
<script type="text/javascript">
  $(document).ready(function(){
    $('#animatelinks a').linkanimate1({
      speed: 300,
      astart: true,
      hclass: 'ahover',
      dclass: 'adefault'
    });
  });
</script>

В функции определены следующие параметры:

  • speed - Числовое значение. Скорость анимации, задается в миллисекундах.
  • astart - логическое значение. Если установлено значение true, то во время загрузки страницы ссылки анимируются. Если значение false, то анимации при загрузке страницы не будет.
  • hclass - текстовое значение. Определяет класс ссылки, когда на нее наведен курсор (можно задать, скажем, фон через CSS).
  • dclass - текстовое значение. Определяет класс ссылки в состоянии покоя.

Рабочий пример работы скрипта слайд-анимации ссылок:

Ссылки в этом блоке анимированные. Например, вот эта ссылка. Подведите на нее курсор.

Также, могут быть анимированы ссылки в списках:

Категорически не рекомендую использовать скрипт для анимации ВСЕХ ссылок на странице. Могут произойти неожиданные глюки и торможения. Лучше использовать скрипт для ограниченного пространства со ссылками. Например, для менюшек.

Если будут критика или предложения, то мы вас выслушаем и постараемся ответить.

Много в мире хорошего. Надеюсь этот скрипт тоже отнесут к хорошему.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Скрипт слайд-анимации ссылок
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:6452
Рейтинг:4.3/12
Дата добавления:2011-10-25 13:26, Вторник
Добавил:Szen
Теги:ссылки, анимация, слайд

Мини-форум

№ 02011-10-25 13:26
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт слайд-анимации ссылок".
Гость
Учавствовать в обсуждении "Скрипт слайд-анимации ссылок" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким файл-хостингом вы пользуетесь?
Всего ответов: 397
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 2
Гостей: 2
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz