jQuery / CSS3 Effet d'ombre animé

Question

Cette question va probablement être rejetée, mais je me suis dit que quelqu'un pourrait m'aider.

L'effet que je recherche est le bloc bleu qui monte et descend comme un ballon, et l'ombre qui grandit et rétrécit sous lui, comme le bloc monte et descend, en boucle.

Avez-vous des idées sur la façon de programmer ceci, ou quelqu'un connaît-il un tutoriel/plugin qui pourrait le faire ?

Answer 1

Vous pouvez le faire avec jQuery ou bien avec CSS3 , votre appel, je vais vous montrer les deux :

Démonstration CSS3

CSS3 :

#box{
  position:absolute;
  top:100px;
  left:0;
  width:200px;
  height:200px;
  background:#6CB8E9;
     -moz-animation:jump 2s infinite ease-in-out;
  -webkit-animation:jump 2s infinite ease-in-out;
}

#shadow{
  position:absolute;
  top:290px;
  height:20px;
  border-radius:30px;
  left: -200px;
  background:transparent;
  width:200px;
  box-shadow:200px 0 10px 2px rgba(0,0,0,0.4);
  margin-left:0;
  opacity: 1;
     -moz-animation:shadowSize 2s infinite ease-in-out;
  -webkit-animation:shadowSize 2s infinite ease-in-out;
}

@-moz-keyframes jump {
    0%   { top:100px;}
    50%  { top:25px;}
    100% { top:100px;}
}
@-webkit-keyframes jump {
    0%   { top:100px;}
    50%  { top:25px;}
    100% { top:100px;}
}

@-moz-keyframes shadowSize {
    0%   { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
    50%  { width:150px; margin-left:25px;opacity:0.3; box-shadow:200px 0 30px rgba(0,0,0,0.3);}
    100% { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
}
@-webkit-keyframes shadowSize {
    0%   { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
    50%  { width:150px; margin-left:25px;opacity:0.3; box-shadow:200px 0 30px rgba(0,0,0,0.3);}
    100% { width:200px; margin-left:0px; opacity:1;   box-shadow:200px 0 10px rgba(0,0,0,0.7);}
}

---

Maintenant, avec notre cher jQ... utilisez simplement une image .png pour l'ombre au lieu de mon horrible box-shadow :)

Démonstration de jQuery

var li = 1; // a LoopIterations variable

function loop(){  

    li = ++li%2;  // reset evenly to '0' // results in 0, 1, 0, 1, 0, .... 

  $('#shadow').animate({
      width:       !li ? 150:200 ,
      marginLeft:  !li ? 25:0 ,
      opacity:     !li ? 0.3:1
  }, 2000);

  $('#box').animate({
    top:        !li ? 25 : 100
  },2000, loop);   // THIS 'loop' callback will recall the loop() function creating ... a loop :D

}

loop(); // start loop

Pour expliquer : A chaque itération impaire li sera réglé sur 0 et sur chaque autre à 1 grâce à % (Opérateur modulo).
0 en Javascript peut être représenté comme false Il s'agit d'un opérateur ternaire qui vérifie la présence de deux valeurs booléennes : [true or false statement] ? [do this if true] : [do that if false] ;

!li ? 150:200 signifie que si !li (= 0 = est faux) utiliser 200 sinon utiliser 150

En outre :

<div id="box"></div>
<div id="shadow"></div>

et CSS :

#box{
  position:absolute;
  top:100px;
  width:200px;
  height:200px;
  background:#6CB8E9;
}

#shadow{
  position:absolute;
  top:310px;
  height:1px;
  background:rgba(0,0,0,0.26);
  width:200px;
  box-shadow:0 0 14px 2px #000;
  margin-left:0;
  opacity: 1;
}