JS30. Задание 22 Follow Along Link Highlighter

Демо https://js3022.github.io/
Код https://github.com/js3022/js3022.github.io

Подсветка ссылок, которая следует вслед за курсором. Небольшое вступительное задание, одно из нескольких, результатом которых будет реализация выпадающего меню.

Сначала нам нужно получить доступ ко всем ссылкам на странице и слушатель события, когда курсор находится над ссылкой.

var triggers = document.querySelectorAll("a");
var highlight = document.createElement("span");

highlight.classList.add("highlight");
document.body.appendChild(highlight);

function highlightLink(e) {
console.log("Highlight", e)
}

triggers.forEach(a => a.addEventListener("mouseenter", highlightLink))

Теперь нам нужно определить размеры ссылки: её ширину и высоту, а также положение на странице. Для этого используем метод .getBoundingClientRect()

function highlightLink() {
    var link = this.getBoundingClientRect();
    console.log(link)
}

Используя эту информацию, мы можем изменить код, чтобы выделение соответствовало размерам и расположению ссылки:

function highlightLink() {
    var link = this.getBoundingClientRect();
    console.log(link)
    highlight.style.width = `${link.width}px`;
    highlight.style.height = `${link.height}px`;
    highlight.style.transform = `translate(${link.left}px, ${link.top}px)`;
}

 Последний штрих - учитывать прокрутку страницы при определении местоположения ссылки. Для этого определяем window.scrollY и прибавляем его к величине link.top. Заодно определим на всякий случай window.scrollХ и прибавляем его к величине link.left (мало ли. вдруг у страницы есть горизонтальная полоса прокрутки)

highlight.style.transform = `translate(${link.left + window.scrollX}px, ${link.top + window.scrollY}px)`;

Код полностью:

var triggers = document.querySelectorAll("a");
var highlight = document.createElement("span");

highlight.classList.add("highlight");
document.body.appendChild(highlight);

function highlightLink() {
    var link = this.getBoundingClientRect();
    console.log(link)
  
    highlight.style.width = `${link.width}px`;
    highlight.style.height = `${link.height}px`;
    highlight.style.transform = `translate(${link.left + window.scrollX}px, ${link.top + window.scrollY}px)`;
}

triggers.forEach(a => a.addEventListener("mouseenter", highlightLink));


Всё работает, всё хорошо. Единственное сомнение - зачем это было нужно, если почти такого же эффекта можно было добиться гораздо проще.

Достаточно было добавить в css свойство

a:hover {
    transition: all 0.2s;
    background: #64BEC2;
    background: linear-gradient(to bottom, #A5DEE1 5%, #8FDDE1 20%, #64BEC2 30%, #207A7E 50%);
} 

Здесь похожий эффект: https://codepen.io/kathykato/pen/RgZrZM

А здесь - подборки подобных эффектов. Некоторые интересные: http://css-live.ru/cssjssvg-s-podvypodvertom/ezhenedelnaya-podborka-krasivyx-effektov-nacsssvgjs-46.html