Привет, ребята🙌
Сегодня я закончил 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 ✅
Спасибо за внимание.Увидимся завтра!