Create a Slick Rollover Effect For Text Links

I stumbled upon this neat little text effect browsing – nay drooling over the Blue Stag website on my internet travels. It’s subtle, adds to the design and I think it looks the business. So let’s learn from it and create our own version!

A demo of this tutorial is available here.

Creating our navigation menu

Let’s throw together a little menu

<nav id="primary-nav">
   <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Services</a></li>
      <li><a href="">Team</a></li>
      <li><a href="">Contact</a></li>
   </ul>
</nav>

Now, let’s style her up

There’s not a terrible amount going on here, it’s basic CSS that gives us a standard looking navigation menu so I won’t go into detail here. The bit we want is in the next section!

nav#primary-nav {
   width: 100%;
   float: left;
   background: #de456b;
}
   nav#primary-nav li {
      display: block;
      float: left;
      background: #de456b;
      margin: 0;
      border-bottom: 1px solid #fff;
   }
      nav#primary-nav a {
         color: #fff;
         padding: 20px;
         display: block;
      } So what we have is the following

Let’s get animating

When we rollover the menu items, we get static text links, nothing fancy happens and that’s what’s expected but with the following keyframes, we will transform these links into slick little rollovers.

keyframes primary_nav_hover /* Create a keyframe animation called primary_nav_hover */
{
   0% { /* The start of the animation */
      transform: translateY(0); /* Default y-axis position */
      opacity : 1 /* The text is 100% opaque */
   }
   49% { /* Between 0% & 49% of the animation */
      transform: translateY(25%); /* Move the text down 25% on the y-axis */
      opacity: 0 /* Bring down the opacity to 0% transparency */
   }
   50% { /* Between 49% & 50% of the animation */
      transform: translateY(-25%); /* Move the text 25% up on the y-axis */
      opacity: 0 /* Make the text completely transparent */
   }
   100% { /* Between 50% and 100% of the animation, end */
      transform: translateY(0); /* Move the text back to the original position */
      opacity: 1 /* Make the text 100% opaque again */
   }
}

Now with our primary_nav_hover keyframe animation made, all we need to do is add it to the menu item link when a user hovers.

nav#primary-nav > ul >  li:hover > a {
   animation: primary_nav_hover ease-out 200ms 100ms 1; 
}

We are using shorthand animation to say the following

animation:

• primary_nav_hover: The name of our animation.
• ease-out: timing function
• 200ms: 200 milliseconds duration
• 100ms: 100 millisesonds delay
• 1: iteration count