Animated arrow indicating rollover

Asked

Viewed 739 times

0

jquery css

  • Did you solve it? Mark one of the answers with to finish the question. Do not leave it open, or tell us what needs to be improved.

2 answers

1

In the case of the example below I did using Fontawesome, but vc can do with any element. Just use @keyframes

You can read more about animation with CSS in this mozilla documentation

Take the example:

body { text-align:center}
.fa.icone {
    font-size: 46px;
    color: red;
    opacity: 1;
    animation: anima 1500ms ease infinite;
}
@keyframes anima {
    to {
        opacity: 0.1;
        transform: scale(0.85) translateY(20px);
    }
}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <i class="fa fa-angle-double-down icone"></i>

0

With jQuery you can use the .Animate.

I created the arrow with CSS that you can customize (see comments).

Example:

$(function(){
   (function anima(){
      $(".setaScroll").animate({
         "top": "8", // 1ª animação: vai de 0 a 8 no top
         "opacity": "1"
      }, 500, function(){
         $(this).animate({
            "top": "12", // 2ª animação: vai de 8 a 12 no top
            "opacity": ".1"
         }, 500, function(){
            $(this).css("top", "0"); // volto a seta para posição 0
            anima(); // chamo a função criando um loop
         });
      });
   }())
});
body{
   background: #000;
}

.setaScroll{
   border: solid #fff; /* cor da seta */
   border-width: 0 5px 5px 0; /* 5px = espessura da seta */
   padding: 7px; /* tamanho da seta */
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   position: absolute;
   top: 0;
   left: 0;
   opacity: .3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative; left: 50px; top: 50px;">
   <i class="setaScroll"></i>
</div>

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.