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

Скрипты

Рисунок Скрипт слайд-анимации ссылок
x;z-index:1 }
Скрипт слайд-анимации ссылок Скрипт слайд-анимации ссылок
оценка: 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


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


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

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

Мини-форум

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

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

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



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