Saltar al contenido
Codifíca.me | Desarrollo web | Programación
Desarrollo web

Animación Araña en JS y CSS

18 febrero, 2019

Subo una animación hecha en JS y CSS de una araña que cuelga del menú de la web, impresionante lo que hacen con JS y CSS, qué talento.

Si dáis una vuelta por codepen.io podéis encontrar cientos de js y css que son realmente buenos.
Tambien hay otros tantos que no valen mucho, pero hay de todo.

Este en particular lo podéis encontrar aquí.

Se vería algo parecido a esto, aunque lo puedes puedes poner a tu gusto:

animacion-spider-css

Si quierer ponerla sobre un wp, solo tienes que añadir esto a tu librería css, o bien desde el administrador de wp o bien desde un fichero que lo cargue cuando quieras. Y añadir el html y las llamadas a los ficheros js desde por ejemplo un widget de WordPress.

El código CSS sería este:

/*
spider
*/
 
@media screen and (min-width: 880px) {
#letters{  
  font-size: 50px;
  position: absolute;
  top: 250px;
  left: 500px;
  width: 350px;  
  -webkit-animation: change 5s linear infinite;
  -moz-animation: change 5s linear infinite;
  -ms-animation: change 5s linear infinite;
  -webkit-animation-delay: 2700ms;
}
}
@-webkit-keyframes change{
  0%{
    opacity: 1;
  }25%{
    opacity: 0;
  }50%{
    opacity: 0;
  }100%{
    opacity: 1;
  }
}
@-moz-keyframes change{
  0%{
    opacity: 1;
  }25%{
    opacity: 0;
  }50%{
    opacity: 0;
  }100%{
    opacity: 1;
  }
}
 
 
@media screen and (min-width: 880px) {
#spider1{
  border: 3px solid black;
  width: 100px;
  height: 75px;  
  border-radius: 50% 50%;
  box-shadow: inset 0px 0px 70px 0px black;
 position: absolute;
  top: -150px;
  left: 109px;
  z-index: 98;  
  -webkit-animation: down 5s linear infinite;
  -moz-animation: down 5s linear infinite;
  -ms-animation: down 5s linear infinite;
  -webkit-animation-delay: 2000ms;
}
}
@-webkit-keyframes down{
  0%{
    top: -350px;    
  }50%{
    top: 350px;
  }
  100%{
    top: -150px;
  }
}
@-moz-keyframes down{
  0%{
    top: -350px;    
  }
  25%{
    top:200px;    
  }
  50%{
    top:400px;    
  }
  100%{
    top:-700px;    
  }
}
@media screen and (min-width: 880px) {
#eye{
  border: 4px solid black;
  width: 40px;
  height: 30px;
  background: white;
  border-radius: 50% 50%;
  position: absolute;
  top: -1px;
  left: 3px;
}
#eye:after{
  content: "";
  display: block;
  border: 4px solid black;
  width: 40px;
  height: 30px;
  background: white;
  border-radius: 50% 50%;
  position: absolute;
  top: -5px;
  left: 50px;
}
#pupil{
  border: 5px solid black;
  width: 2px;
  height: 2px;
  border-radius: 100%;
 background: black;
  position: absolute;
  top: -5px;
  left: 22px;
  box-shadow: 40px 1px 0px 0px black;
  z-index: 999;
  -webkit-animation: move 2s linear infinite;
  -moz-animation: move 2s linear infinite;
  -ms-animation: move 2s linear infinite;
}
}
@-webkit-keyframes move{
  0%{
    left: 22px;
  }
  25%{
    left: 37px;
  }
  50%{
    left: 10px;
  }
  75%{
    left: 15px;
  }100%{
    left: 22px;
  }
}
@-moz-keyframes move{
  0%{
    left: 22px;
  }
  25%{
    left: 37px;
  }
  50%{
    left: 10px;
  }
  75%{
    left: 15px;
  }100%{
    left: 22px;
  }
}
/*LEGS!!*/
@media screen and (min-width: 880px) {
#leg{
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  position: absolute;
  top: -14px;
  left: 94px;
  z-index: -998;
}
#leg p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg p:nth-child(2){  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
#leg2{
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  position: absolute;
  top: 17px;
  left: 101px;
 
}
#leg2 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg2 p:nth-child(2){  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
#leg3{
  -webkit-transform: rotate(13deg);
  -moz-transform: rotate(13deg);
  -ms-transform: rotate(13deg);
  position: absolute;
  top: 45px;
  left: 91px;
 
}
#leg3 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg3 p:nth-child(2){
 
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
 
 
#leg4{
  -webkit-transform: rotatey(180deg)
    rotatez(-50deg);
  -moz-transform: rotatey(180deg)
    rotatez(-50deg);
  -ms-transform: rotatey(180deg)
    rotatez(-50deg);
  position: absolute;
  top: -14px;
  left: -33px;
  z-index: -998;
}
#leg4 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg4 p:nth-child(2){  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
#leg5{
  -webkit-transform: rotatey(180deg)
    rotatez(-20deg);
  -moz-transform: rotatey(180deg)
    rotatez(-24deg);
  -ms-transform: rotatey(180deg)
    rotatez(-24deg);
  position: absolute;
  top: 13px;
  left: -47px;
  z-index: -998;
}
#leg5 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg5 p:nth-child(2){  
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
 
#leg6{
  -webkit-transform: rotatey(180deg)
    rotatez(15deg);
  -moz-transform: rotatey(180deg)
    rotatez(-50deg);
  -ms-transform: rotatey(180deg)
    rotatez(-50deg);
  position: absolute;
  top: 42px;
  left: -38px;
 
}
#leg6 p:nth-child(1){
  border: 6px solid black;
  border-bottom: transparent;
  border-left: transparent;  
  border-radius: 5px;
  width: 40px;
  height: 10px;
}
#leg6 p:nth-child(2){
 
  border-top: 4px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 60px solid black;
  border-right: transparent;
  -webkit-transform: rotate(86deg);
  -moz-transform: rotate(86deg);
  -ms-transform: rotate(86deg);
  position: absolute;
  top: 30px;
  left: 13px;
}
#string{
  border: 2px solid black;
  height: 430px;
  width: 0px;
  position: absolute;
  top: -432px;
  left: 47px;
  -webkit-animation: down2 5s linear infinite;
  -webkit-animation-delay: 2000ms;
  position: absolute;
 
}
}

Y ahora quedaría la parte del html y las llamadas a los ficheros js, que sería así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<div id="other">
  <div id="spider1"> 
 
  <div id="eye">
    <p id="pupil"></p>
  </div>
 
  <div id="leg">
  <p></p>
  <p></p>
</div>
 
<div id="leg2">
  <p></p>
  <p></p>
</div>
 
<div id="leg3">
  <p></p>
  <p></p>
</div>
 
<div id="leg4">
  <p></p>
  <p></p>
</div>
 
  <div id="leg5">
  <p></p>
  <p></p>
</div>
 
  <div id="leg6">
  <p></p>
  <p></p>
</div>
 
  <div id="string"></div>
 
</div>
  <script src="https://use.edgefonts.net/creepster.js"></script>
<div id="letters">
  <script src="https://use.edgefonts.net/eater.js"></script>
 
  <script src="https://use.edgefonts.net/nosifer.js"></script>
  <p></p>
</div>
 
 
</div>