Подчеркивание ссылок с анимацией на jQuery
Сегодня я бы хотел показать как создать подчеркивание ссылок с анимацией на jQuery. В интернете вы можете найти множество похожего контента, где подчеркивание реализовано с помощью CSS. Но мы решили сделать это с помощью плагина который имеет немного больше преимуществ. linkUnderline — это очень маленький плагин jQuery, который использует CSS-переходы для создания анимированных, настраиваемых линий под вашим текстом при наведении.
Иногда нужно реализовать элементарные вещи на сайте, которые станут отличным дополнением для вашего сайта, кроме этого такой подход к организации ссылок сейчас весьма популярен. Также вы можете воспользоваться готовыми решениями в нашем интернет-магазине шаблонов.
Создаем подчеркивание ссылок с анимацией на jQuery.
Шаг 1. HTML
Для начала нам необходимо подключить скрипты, если у вас, а у вас уже наверняка есть один подключенный jQuery, то проверьте чтобы не было конфликтов:
1 2 |
<script src="jquery-3.2.1.min.js"></script> <script src="jquery.linkunderanim.js"></script> |
Затем нам необходимо создать достаточную простую разметку, которая будет содержать наши ссылки заключенные в общий id, который будет подвязан к нашему плагину.
1 2 3 4 5 6 7 |
<ul id="myNav"> <li><a href="">Главная</a></li> <li><a href="">Интресно</a></li> <li><a href="">Плагины</a></li> <li><a href="">Контакты</a></li> <li><a href="">О нас</a></li> </ul> |
Так как всю работу будет выполнять плагин, мы можем упустить стили CSS, и перейти к следующему шагу.
Шаг 2. JS
Как вы знаете, чтобы плагин работал на странице его мало подключить его надо еще инициализировать, для этого у нас будет следующий вызов плагина:
1 2 3 |
$(function(){ $("#myNav").linkUnderlineAnim(); }); |
Вы можете легко настроить анимацию и подчеркивание, указав следующие параметры функции linkUnderlineAnim ().:
1 2 3 4 5 6 7 8 9 10 |
$("#myNav").linkUnderlineAnim({ // Скорость анимации в милисекундах "speed" : 300, // Цвет "color" : "#DB3340", // Толщина линии "thickness" : 2, // расстояние в пикселях от ссылки "distance" : 0 }); |
Это весь плагин, как вы заметили он не «тяжелый» и с ним легко работать, я думаю это достаточно неплохой вариант, чтобы организовать подчеркивание ссылок на сайте.
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 27.06.2018 в 09:20, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |