Привет, ребята🙌

Сегодня я закончил 22 видео JavaScript30!

Проект 22: Следуйте по ссылкам

Источник: https://javascript30.com

Обучение:

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

Мы добьемся выделения с помощью базового элемента span.highlight. CSS для этого уже задан, он содержит свойство перехода для эффекта анимации -

.highlight {
  transition: all 0.2s;
  border-bottom:2px solid white;
  position: absolute;
  top:0;
  background: white;
  left:0;
  z-index: -1;
  border-radius:20px;
  display: block;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

Добавление элемента через JS

const highlight = document.createElement('span')
highlight.classList.add('highlight')
document.body.appendChild(highlight)

Это создает элемент span и добавляет к нему класс highlight. Затем добавляет элемент в конец тела документа.

Теперь, чтобы выяснить, когда происходит наведение

const triggers = document.querySelectorAll('a');
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink))
function highlightLink() {
}

В highlightLink() нам нужно переместить элемент span точно по ссылке, на которую мы наводим курсор. Благодаря z-index: -1 элементу подсветки он перемещается по ссылке.

Чтобы найти положение и размеры ссылки, мы будем использовать getBoundingClientRect(). Этот метод возвращает размер элемента и его положение относительно окна просмотра. Возвращаемое значение является объектом DOMRect. Результатом является наименьший прямоугольник, который содержит весь элемент со свойствами левого, верхнего, правого, нижнего, x, y, ширины и высоты, описывающими общий бордюр в пикселях. Свойства, отличные от ширины и высоты, относятся к верхнему левому углу окна просмотра.

Здесь важно отметить, что верх, лево, право, низ — все относительно области просмотра.

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);
  const coords = {
    //width and height are absolute
    width: linkCoords.width,
    height: linkCoords.height,
    // we need to add scroll since 
    //top,left are relative to the viewport
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX
  };
  highlight.style.width = `${coords.width}px`;
  highlight.style.height = `${coords.height}px`;
  highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}

Мы извлекаем размеры и положение элемента ссылки, над которым мы наводим курсор, и устанавливаем стиль элемента выделения в соответствии с этими размерами и перемещаем его в это положение. Поскольку в CSS выделения уже задано значение transition: all 0.2s, изменение будет отображаться анимированным!

Сегодня я узнал (Т-И-Л):

  • Создайте анимацию, наведя курсор на ссылку
  • Element.getBoundingClientRect()🙌

Это все на Day22 ✅

Спасибо за внимание.Увидимся завтра!