ActivateSaga

ActivateSaga. Content for Web Artisans.

CSS Animation: Chasing Navigation Idea

by · Published · Updated

So I found this pen I wrote about a month ago. Just wanted to share what I came up with and hopefully provide you with some coding inspiration.

My initial idea was to create a navigation that follows when you scroll without using position: fixed; So I tried to come up with a CSS solution.

Usually you would see something like this:

 #header {
     position: fixed;
     top: 0;
     z-index: 1;
    // rest of code...
 }

That works just fine, however, this becomes a problem on iOS devices. In my experience, there will be a delay and the header will look choppy. There will be times where the header wont follow.

So I started to write some code (which is still a work in progress) that uses CSS transforms to provide a chasing navigation menu.

First I initialized the keyframe property like so:

 /**chasing animation*/
@keyframes chase{

   from {
    -webkit-transform: translateY(0px);
     transform: translateY(0px);

}

   to {
     -webkit-transform: translateY(175px);
      transform: translateY(175px);
 }

}

For the sake of browser support, you should use vendor prefixes:

@-webkit-keyframes chase {}
@-moz-keyframes chase {}

If you’re SASS or Less user, you could either write a mixin for this or use an auto-prefixer. I can explain these in detail in another article.

Next, we have to call the “animation” property in order for it to work.

#menu {
  // code
  -webkit-animation: chase 2s ease infinite;
  animation: chase 2s ease infinite;
}

Inside the property, you call the chase keyframe that you defined, the delay, easing and duration of the animation.

Here is the full example:

See the Pen Animating Chasing Navigation by Tyler Souza (@tysweezy) on CodePen.


Hopefully that provides some ideas. I plan to use some Javascript/jQuery to detect the scrolling when it gets to a certain height.

Anyway, more to come soon. Stay tuned.

Tags:

Tyler Souza

Tyler is a very passionate full-stack developer who thrives on a challenge. He specializes in programming (mainly in Python), REST API development, and keeps up with the latest front-end technologies. When not coding, he loves to eat ramen, BBQ, and travel.

You may also like...

  • davidcrandall99

    It’s a clean animation, but consider this: your code is an absolute position. This means, you would have to use JavaScript to not only update the position of #menu, but re-trigger the animation. Instead of using CSS animations, use transitions. This is good for a couple reasons:
    1) You can set the transition to effect the top position of #menu, so all JS needs to do is update one value, and the animation automatically triggers.
    2) If CSS animations aren’t supported by a browser, you’re out of luck. If they don’t support transitions, #menu will behave similarly to a fixed navbar without actually being fixed.

    3) Whether or not you use animations or transitions, you need to figure out how you want the #menu bar to function when the user scrolls down AND up. When you can determine that with JavaScript, you can apply a separate class with the transition when scrolling down, and have a different class, or no class, be applied when scrolling up.

    I made a slightly modified version of your codepen to demonstrate: http://codepen.io/anon/pen/CvGzs

    Notice when you scroll down, the #menu bar appears nice and smoothly, but when scrolling up, it acts like a fixed bar, even though it’s position is absolute.

    • tysweezy

      Thanks for the feedback and demonstration. Awesome points made. About the browser support, I considered that. http://caniuse.com/#search=animations. I was also thinking of providing a fallback for older browsers; degrading gracefully. However, I’m sure there are better ways to avoid getting “hacky” and have bloated code.