Сегодня я бы хотел поговорить о достаточно простом примере, а именно как создать подчеркивание ссылок на сайте с анимацией когда посетитель наводит курсор мыши. В интернете вы можете найти множество похожего контента, где подчеркивание реализовано с помощью CSS. Но мы релишили сделать это с помощью плагина который имеет немного больше преимуществ. linkUnderline — это очень маленький плагин jQuery, который использует CSS-переходы для создания анимированных, настраиваемых линий под вашим текстом при наведении.

 

Иногда нужно реализовать элементарные вещи на сайте, которые станут отличным дополнением для вашего сайта, кроме этого такой подход к организации ссылок сейчас весьма популярен. Также вы можете воспользоваться готовыми решениями от наших партнеров:

Шаг 1. HTML

Для начала нам необходимо подключить скрипты, если у вас, а у вас уже наверняка есть один подключенный jQuery, то проверьте чтобы не было конфликтов:

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

Так как всю работу будет выполнять плагин, мы можем упустить стили CSS, и перейти к следующему шагу.

Шаг 2. JS

Как вы знаете, чтобы плагин работал на странице его мало подключить его надо еще инициализировать, для этого у нас будет следующий вызов плагина:

Вы можете легко настроить анимацию и подчеркивание, указав следующие параметры функции linkUnderlineAnim ().:

Это весь плагин, как вы заметили он не «тяжелый» и с ним легко работать, я думаю это достаточно неплохой вариант, чтобы организовать подчеркивание ссылок на сайте.

Вот и все. Готово!

Читайте также: