ejemplos - Cómo crear animaciones jQuery Easing/Bounce personalizadas

efectos con jquery para div

Question

Estoy familiarizado con la función animada de jQuery y también he revisado las diversas funciones de aceleración de la interfaz de usuario jQuery . Lamentablemente ninguno de ellos aparece como el mismo efecto de animación que estoy buscando, ¿es posible crear sus propias funciones de relajación?

La animación que estoy intentando se puede ver en el webopage de Apple Mac con el widget de productos cargados dinámicamente en la parte superior. Los elementos iniciales parecen deslizarse hacia adentro desde la parte superior y luego dan un efecto de rebote después de aterrizar en su lugar. ¿Es posible recrear este estilo de relajación utilizando el código jQuery personalizado? ¿O posiblemente construyas tus propias funciones sencillas de terceros?

He incluido una pantalla de lo que estoy hablando y espero que alguien pueda ofrecer una solución. Gracias por adelantado :)

Answer 1

Vea mi demo aquí

La idea principal es realizar 2 animaciones continuas utilizando el efecto easeOutCubic :

HTML:

<div class=''left''></div>
<div class=''center''></div>
<div class=''right''></div>

JS:

$(''div.left'').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){
    $(''div.left'').animate({top: 400, left: 20}, 300, "easeOutCubic");
});

$(''div.center'').animate({top: 420}, 300, "easeOutCubic", function(){
    $(''div.center'').animate({top: 400}, 300, "easeOutCubic");
});

$(''div.right'').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){
    $(''div.right'').animate({top: 400, right: 20}, 300, "easeOutCubic");
});