ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эффект подчёркивание по сторонам на CSS

Эффект подчёркивание по сторонам на CSS

Эффект подчёркивание по сторонам на CSS
Создаем эффект наведения, где учитывается направления курсора, ведь трюк имеет анимацию плавной полосы, что работает со стороны размещения клика. А точнее, если вы наводите курсор по центру, то подчеркивание идет по обе стороны. Если с правой или левой стороны, то изначально идет с того боку, где изначально был наведен клик. В этом и заключается hover эффект, где вам не нужно подбирать именно ту стилистику, что только подчеркивание работает по одному направлению.

Как поняли, это содержит все направление, которые зависят тот самого курсора, а точнее где о выставлена на ссылку. Что по дизайну, то он полностью выстроен в CSS, где веб-разработчик изменяет ширину и все что связано с оттенком цвета. Но где нужно забывать, что сама гамма цвета сделана под градиент, что смотрится великолепно. Что на темном фоне мы с начало увидим, аналогично переставляем на светлый, где также меняется заданная палитра, которая поставлена в стилях

Эффект подчёркивания курсора по сторонам

Так идет в представленном материале:

Оригинальное подчёркивание ссылки на CSS/JS

Установка:

HTML

Код
<nav>
  <a class="pedsanug" href="#">Первая</a>
  <a class="pedsanug" href="#">Вторая</a>
  <a class="pedsanug" href="#">Третья</a>
  <a class="pedsanug" href="#">Четвертая</a>
  <a class="pedsanug" href="#">Пятая</a>
  <a class="pedsanug" href="#">Шестая</a>
</nav>

CSS

Код
nav {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
}

.pedsanug {
  position: relative;
  font-weight: 600;
  text-decoration: none;
  color: #e0dcdc;
  opacity: .8;
  -webkit-transition: opacity .3s cubic-bezier(.51, .92, .24, 1);
  transition: opacity .3s cubic-bezier(0.58, 0.93, 0.13, 0.98);
}
.pedsanug::after {
  --scale: 0;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3px;
  background: linear-gradient(135deg, rgb(114 166 230), rgb(55 126 212));
  -webkit-transform: scaleX(var(--scale));
  transform: scaleX(var(--scale));
  -webkit-transform-origin: var(--x) 50%;
  transform-origin: var(--x) 50%;
  -webkit-transition: -webkit-transform .3s cubic-bezier(.51, .92, .24, 1);
  transition: -webkit-transform .3s cubic-bezier(.51, .92, .24, 1);
  transition: transform .3s cubic-bezier(0.65, 0.92, 0.14, 0.99);
  transition: transform .3s cubic-bezier(0.6, 0.9, 0.15, 0.97), -webkit-transform .3s cubic-bezier(0.6, 0.9, 0.15, 0.97);
}

.pedsanug:hover {
  opacity: 1;
}

.pedsanug:hover::after {
  --scale: 1;
}

JS

Код
document.querySelectorAll('.pedsanug').forEach((elem) => {

  elem.onmouseenter =
  elem.onmouseleave = (e) => {

  const tolerance = 10

  const left = 0
  const right = elem.clientWidth

  let x = e.pageX - elem.offsetLeft

  if (x - tolerance < left) x = left
  if (x + tolerance > right) x = right

  elem.style.setProperty('--x', `${ x }px`)

  }

})

Изначально здесь все задействовано под A, где пришлось убрать и прописать стили, что остается больше маневров по оформлению. На счет скрипта JS, то если не разбираетесь не нужно лести, там все уже настроено по умолчанию под любую тематику можно выставить.

Также идет demo страница, там вы можете подробнее ознакомится с этим нехитрым эффектом, который изначально заменяет несколько действий. Да и смотрится совершенно по другому, хотя сразу можно с эффектом горизонтальное меню выстроить.

Демонстрация
2020-09-14 Загрузок: 1 Просмотров: 233 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 1
Kosten
Kosten 2020-09-14 20:181
0
Может этот эффект кому то покажется простом или обычным, где в описание не вся суть открыта, то думаю стоит посмотреть на demo странице, и подчеркиваю, здесь материал перевел на CSS, что вероятно для большинства.
avatar