Animated arrow indicating rollover

Navigation
0

How can I make the animated arrow on the homepage of this site? link

    
asked by anonymous 19.05.2018 / 16:35

2 answers

1

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

You can read more about animation with CSS in Mozilla documentation

See 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>
    
19.05.2018 / 16:52
0

With jQuery you can use .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><divstyle="position: relative; left: 50px; top: 50px;">
   <i class="setaScroll"></i>
</div>
    
19.05.2018 / 19:18
Transfer list to binary file in python Calculation of distance in C