#JavaScript30 Day 22: Follow Along Links

index.html

<div id="profile">
  <img src="https://source.unsplash.com/EVXB_Is-UqI" alt="Cat">
</div>

<nav>
  <ul class="menu">
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="About">About</a></li>
    <li><a href="#" title="Work">Work</a></li>
    <li><a href="#" title="Blog">Blog</a></li>
    <li><a href="#" title="Contact">Contact</a></li>
  </ul>
</nav>

<div class="wrapper">
<h2>Hello, I'm <a href="http://katherinekato.com" title="Katherine Kato">Katherine Kato</a>!</h2>
<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>

javascript30-day-22-follow-along-links.markdown

#JavaScript30 Day 22: Follow Along Links

Hover on the links and it follows the cursor, highlighting the links as you go!

A Pen by Katherine Kato on CodePen.

License.

script.js

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

function highlightLink() {
  const linkCoords = this.getBoundingClientRect();
  console.log(linkCoords);

  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));

style.css

@import url('https://fonts.googleapis.com/css?family=Lato');

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  margin: 0; /* Important! */
  font-family: 'Lato', serif;
  color: #7d7d7d;
}

.wrapper {
  margin: 0 auto;
  max-width: 650px;
  font-size: 20px;
  line-height: 2;
  position: relative;
}

h2 {
  font-family: 'Lato', sans-serif;
  color: #272727;
}

a {
  text-decoration: none;
  color: #272727;
  background: rgba(240, 233, 241, 0.4);
}

.highlight {
  transition: all 0.2s;
  border-bottom: 2px solid #fff8a3;
  position: absolute;
  top: 0;
  background: #fff8a3;
  left: 0;
  z-index: -1;
  display: block;
}

.menu {
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 40px 0 60px 0;
}

.menu a {
  display: inline-block;
  padding: 5px;
  margin: 0 20px;
}

#profile {
  margin: 40px 0;
}

img {
  margin: 0 auto;
  display: block;
  width: 125px;
  height: 125px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}