Fixed bar with animated social icons

14 Jun, 2018

Fixed bar with animated social icons

Have you ever wondered how some of the websites that you visit have a fixed bar with social icons on the left of the page and it just sits there? Have no fear because this post will cover that!

How to make an element fixed:

.div{ position: fixed; }

Done! Yes, is just as simple, just set the position property of an element and you’re ready to go. However you will not see any new behavior of this because just setting the position fixed will have no effect.

.div{ position: fixed; top:50%; left:0; }

To see it working you’ll need to set one of the top, left, bottom, right property of the element. Assigining the value 50% to the top property will result in moving our element to the middle of the page.

Let’s move on with our basic animated bar

HTML:

First we need to add some links because our icons should be clickable. Before going further with the tutorial you need to have the font-awesome added:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="social-icons">
  <a href="#" class="twitter fade-in"><i class="icon-color fa fa-twitter"></i></a>
  <a href="#" class="google-plus fade-in"><i class="icon-color fa fa-google"></i></a>
  <a href="#" class="linkedin fade-in"><i class="icon-color fa fa-linkedin"></i></a>
</div>

HTML part is done, we don’t need any more code for our basic animated icons.

CSS:

.social-icons {
  position: fixed; //setting the position to fixed so that our bar will stay on the left
  top: 50%; //move it to the middle
  left: 0;
  -webkit-transform: translateY(-50%); /\* perfect center by -50% of the height that the bar has  \*/
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.social-icons a {
  display: block; // display block so that the links will not be on the same line
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease, background-color 1s; /\* animate background-color \*/
  -moz-transition: all 0.3s ease, background-color 1s;
  -webkit-transition: all 0.3s ease, background-color 1s;
  color: white;
  font-size: 20px;
}

.social-icons a:hover i {
  box-shadow: none;
  animation: rotate-icon 2s; 
  animation-fill-mode: forwards;
}
.social-icons a i {
  box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.2);
}

Until now we have set how our links should appear on the page. Let’s move on…

.social-icons a:first-child {
  border-top-right-radius: 5px; 
}

.social-icons a:last-child {
  border-bottom-right-radius: 5px;
}

.social-icons a:hover {
  background-color: #191919;
}

.icon-color {
  color: #fff;
}

.twitter {
  background-color: #55acee;
}

.google-plus {
  background-color: #dd4b39;
}

.linkedin {
  background-color: #007bb5;
}

.fade-in {
  opacity: 0;
  -webkit-animation: fade-in ease-in 1; /\* run an animation at the moment when the links are rendered \*/
  -moz-animation: fade-in ease-in 1;
  animation: fade-in ease-in 1;

  -webkit-animation-fill-mode: forwards; /\* making the animation fill mode forwards will cause your changes to persist even after it has finished \*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fade-in.twitter {
  -webkit-animation-delay: 0.2s; /\* delay the appearance of each link  \*/
  -moz-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.fade-in.google-plus {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.linkedin {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

@keyframes fade-in {
  from {
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
  }
  to {
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
  }
}

@keyframes rotate-icon {
  0% {
    -webkit-transform: rotate(10deg) scale(1.1); /\* rotate and scale the link icon at the same time starting from 0 \*/
    -moz-transform: rotate(10deg) scale(1.1);
    transform: rotate(10deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1.4); /\* rotate and scale the link icon at the same time until the animation finishes\*/
    -moz-transform: rotate(360deg) scale(1.4);
    transform: rotate(360deg) scale(1.4);
  }
}

To conclude, there is not a big issue with designing a bar with animated social icons. It’s pretty straightforward.

Here is the full source code and a running example.

<iframe style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;" src="https://codesandbox.io/embed/vvpzykwjq0?module=%2Fstyles.css" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

#markdown #html #css

Fixed bar with animated social icons