May 11, 2015

Animated go to top icon

Animated go to top icon

Animated go to top icon SCSS. The icon is created using fontawesome.

HTML

<section>
  <h1>Animated go to top icon</h1>
  <span class="fa-stack loading fa-3x fa-lg">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-arrow-up fa-stack-1x"></i>
  </span>
</section>

SCSS

@import "compass/css3";

$MovementAmt: 50px;
$size: 82px;
body{
  @include background-image(radial-gradient(top, ellipse cover, #86a9f4 0%, #202034 100%));
 background-attachment: fixed;
  color: #fff;
}
h1{
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 100;
  text-transform: uppercase;
  font-size: 40px;
  margin-bottom: 50px;
}
section{
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  width: 60%;
  height: 200px;
  text-align: center;
}
.loading{
  color: #acc6ff;
  overflow: hidden;
  @include border-radius(100px);
  width: $size;
  height: $size;
  line-height: $size;
  
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
  -moz-mask-image: -moz-radial-gradient(circle, white 100%, black 100%);
  .fa-circle-thin{
    top: -7px;
  }
  .fa-arrow-up{
    @include translate(0px, $MovementAmt);
    -webkit-animation: loading .8s infinite linear; /* Chrome, Safari, Opera */
  }
}
  
@-webkit-keyframes loading {
    from {
      -webkit-transform: translate(0px, $MovementAmt);
    }
    to {
      -webkit-transform: translate(0px, -$MovementAmt);
    }
}
@-moz-keyframes loading {
    from {
      -moz-transform: translate(0px, $MovementAmt);
    }
    to {
      -moz-transform: translate(0px, -$MovementAmt);
    }
}
@-o-keyframes loading {
    from {
      -o-transform: translate(0px, $MovementAmt);
    }
    to {
      -o-transform: translate(0px, -$MovementAmt);
    }
}

Attachments:

I have used external attachments.

http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
demo

No comments:

Post a Comment

Popular Posts

Views