Day22 of #100DaysOfCode

#CodeTogether Day 22/100

Hii folks 🙌

Today I have completed the 22nd video of JavaScript30!

Project 22: Follow Along Links

Source: https://javascript30.com

Learnings:

We have a menu and some random HTML with links. The task is to create a highlight that moves from one link to another on hover, in a smoothly animated fashion.

We’ll achieve the highlight with an underlying span.highlight element. The CSS for this is already given, it contains the transition property for animation effect -

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

Adding the element via JS

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

This creates a span element and adds the class ‘highlight’ to it. Then appends the element to the end of the document body.

Now to figure out when there is a hover

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

In highlightLink() we need to move the span element exactly over the link we're hovering on. Due to z-index: -1 the highlight element, it moves under the link.

To find the position and dimensions of the link, we’ll use getBoundingClientRect(). This method returns the size of an element and its position relative to the viewport. The returned value is an DOMRect object. The result is the smallest rectangle which contains the entire element, with left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

The key thing to note here is that the top, left, right, the bottom is all relative to the viewport.

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

We extract the dimensions and position of the link element we’re hovering over and set the style of the highlight element to those dimensions and move it to that position. Since there is already a transition: all 0.2s set in highlight's CSS, the change will appear animated!

Today I learned (T-I-L):

• Create animation by hovering on the link
• Element.getBoundingClientRect() 🙌

That is all for Day22 ✅

Thanks for reading, See you tomorrow!