[SOLUCIONADO] Animaciones secuenciales en javascript

kalvinman · #1 (**permalink**) 06/08/2014, 15:33

Hola amigos, verán quiero agregarle algo de dinamismo a una presentación web, entonces me gustaria que al entrar se animaran varios objetos usando jquery y de ser posible la librería de css que estoy usando animate.css el punto es que necesito que se anime como una linea de tiempo, es decir primero una animación, luego otra, luego otra y así, entonces como podría hacerlo con jquery?

juangemelo01 · #2 (**permalink**) 07/08/2014, 02:30

con Javascript casi no eh hecho animaciones, en cambio, con css3 si :)

¿mas o menos que es lo que quieres hacer?

eh hecho algunos experimentos,

si quieres que las animaciones se solo se muestren 1 vez, con esta propiedad lo defines

Código:

animation-iteration-count:1;

si tienes por decirlo 3 animaciones, la animacion 1 dura 10 segundos, la 2 5 segundos y la 3 20 segundos, con la propiedad Delay lo puedes conseguir ;)

Código:

transition-delay: 5S

lo que harias seria darle a la animacion 2 un delay de 10 segundos, y a la animacion 3 un delay de 15 segundos

claro, igual le puedes dar un tiempo de retardo a la primer animacion, si es asi, debes tenerlo en cuenta ;)

te muestro unos experimentos inconclusos sobre algunas animaciones que eh hecho

http://juangemelonet.zz.mu/faltapoco/

http://juangemelonet.zz.mu/Misterio/

Repito la pregunta ¿mas o menos que es lo que quieres hacer?

PD: solo la cascada es un gif, todo lo demas tanto la casa como el "paisaje" estan hechos con puro css, si gustas, puedes analizar el codigo

Djoaq · #3 (**permalink**) 07/08/2014, 06:36

Cita:

Iniciado por kalvinman

Hola amigos, verán quiero agregarle algo de dinamismo a una presentación web, entonces me gustaria que al entrar se animaran varios objetos usando jquery y de ser posible la librería de css que estoy usando animate.css el punto es que necesito que se anime como una linea de tiempo, es decir primero una animación, luego otra, luego otra y así, entonces como podría hacerlo con jquery?

Hola te recomiendo que le eches un vistazo a JQUERY UI tiene algunos efectos que te pueden interesar.

http://jqueryui.com/show/

Hay que tener en cuenta que hay 2 opciones :

El metodo effect() ; que sirve para desecandenar el efecto cuando hay una interacción del user ..
onclick , onmouseenter onkeyp .. etc.. :

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prueba de Animaciones</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script>

Código Javascript:

Ver original$(document).ready(function(){
    $( "#boton" ).click(function() {
      $('.contenedor').effect('bounce','slow'); //el primer parameto le pasamos el efecto deseado , el segundo parametro le pasamos la duracion , tambien acepta un entero por ejemplo 220;
    });
 
     $( "#boton" ).click(function() {
      $('.contenedor').effect('bounce','slow',function(){//te en cuenta que podemos introducir callbacks para ejecutar otras acciones como por ejemplo añadirle otro efecto etc..o seleccionar otro elemento y animarle al finalizar este.
        alert("prueba!");
      }); 
    });
  });

Código HTML:

Ver original</script>
</head>
<body>
<button id="boton">effecto</button>
<div class="contenedor">
  <div id="effect">
    <h3>Effect</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
</body>
</html>

En tu caso lo que quieres hacer es que los elementos que quieras aparezcan al cargar la pagina , por lo tanto debes esconderlos y luego mostrarlos ejemplos :

Código HTML:

Ver original<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prueba de Animaciones</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <script>

Código Javascript:

Ver original$(document).ready(function(){
   
    $('.contenedor').hide();
      $('.contenedor').show('scale',220); //mismo funcionamiento primero hacemos hide para al cargar la pagina el elemento no aparezca y despues lo hacemos aparecer con un efecto scale y 220 ms de duración.
  });

Código HTML:

Ver original</script>
</head>
<body>
<div class="contenedor">
  <div id="effect">
    <h3>Effect</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
</body>
</html>

Para hacer lo que quieres , te recomiendo no tirar mucho de callbacks , dentro de callbacks ...
Para ello te recomiendo recorrer el DOM mediante each ( vendría a ser un for que retorna los elementos encontrados mediante el selector indicado ).
Para ello puedes hacer algo como :

Código Javascript:

Ver original$('.div_clase').each(function(i) { //each busca cada uno de los elementos 
    $(this).children().delay(800*i).fadeOut('fast', function() { //children hace referencia  a los elementos hijos del selector $('.div_clase'),  this hace referencia al selector sobre el que hemos desencadenado el evento $('.div_clase') , delay retarda el efecto y multiplicamos la duración por i (indice de vuelta de each por el tiempo de retraso entre efecto y efecto) 
        $(this).fadeIn('slow');
    });
});

Espero haberte ayudado !
Un saludo!

kalvinman · #4 (**permalink**) 09/08/2014, 17:02

Hola amigos, verán quiero agregarle algo de dinamismo a una presentación web, entonces me gustaria que al entrar se animaran varios objetos usando jquery y de ser posible la librería de css que estoy usando animate.css el punto es que necesito que se anime como una linea de tiempo, es decir primero una animación, luego otra, luego otra y así, entonces como podría hacerlo con jquery?

Panino5001 · #5 (**permalink**) 09/08/2014, 17:07

Temas unidos. Por favor no dupliques mensajes.

juangemelo01 · #6 (**permalink**) 09/08/2014, 23:18

kalvinman ¿que es lo que estas intentando animar y no te sale?
a ciegas, no podemos ayudarte mucho

http://codepen.io/elestudiantefantas...to?editors=110

ejemplo muy simple sobre rotacion y desplazamiento en css3

kalvinman · #7 (**permalink**) 10/08/2014, 01:53

Ya pude, la respuesta apropiada fue la de Djoaq, no se porque se republico el mensaje.