Day22: Follow Along Link Highlighter

Introduction: How to use JavaScript and CSS to create a follow-along link highlighter effect.

Project page: https://iris1114.github.io/javascript30/22_Follow-Along-Link-Highlighter/

HTML

Contains a nav element with multiple a links inside.
Contains a div container with multiple paragraphs, each containing multiple a links.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>👀👀👀Follow Along Nav</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul class="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Order Status</a></li>
        <li><a href="">Tweets</a></li>
        <li><a href="">Read Our History</a></li>
        <li><a href="">Contact Us</a></li>
      </ul>
    </nav>

    <div class="wrapper">
      <p>
        Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit.
        Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati
        distinctio, aut itaque, qui vitae!
      </p>
      <p>
        Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque
        praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate
        consequuntur facilis ullam dignissimos, aperiam quam veniam.
      </p>
      <p>
        Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime
        <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit
        recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.
      </p>
      <p>
        Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni
        odit <a href="">totam</a> ut consequatur eveniet sunt quam provident
        sapiente dicta neque quod.
      </p>
      <p>
        Aliquam <a href="">dicta</a> sequi culpa fugiat
        <a href="">consequuntur</a> pariatur optio ad minima, maxime
        <a href="">odio</a>, distinctio magni impedit tempore enim repellendus
        <a href="">repudiandae</a> quas!
      </p>
    </div>

    <script src="scripts.js"></script>
  </body>
</html>

CSS

Sets the basic page styles, including fonts, colors, and layout.
Sets the styles for the highlight effect.

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f4f4f4;
}

nav {
  background: #333;
  color: #fff;
  padding: 1rem;
  width: 100%;
}

.menu {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

.menu li {
  margin: 0;
}

.menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}

.wrapper {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.highlight {
  position: absolute;
  background: yellow;
  border-radius: 5px;
  transition: all 0.2s;
  z-index: -1;
}

JavaScript

Uses JavaScript to create the follow-along link highlighter effect.

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

function highlightLink() {
  const linkCoords = this.getBoundingClientRect()
  const coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    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)`
}

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

Note

Uses getBoundingClientRect to get the position and size of the link.
Uses window.scrollY and window.scrollX to account for page scrolling.
Uses the mouseenter event to trigger the highlight effect.