second - Mantener la animación CSS y jQuery en buen estado

jquery first child

Question

Mis problemas:

• Mi animación no responde. Las imágenes y el texto se mueven y se hacen demasiado grandes cuando se usan en pantallas más pequeñas.
• Mi clase .moveup no se animará. Intenté ubicar la transición de CSS en todos los lugares donde podía pensar que pertenecía, pero cuando jQuery agrega a la clase, las dos imágenes afectadas simplemente saltan.

Información de fondo:
Estoy construyendo un sitio web, y como parte de este sitio web, se supone que se debe reproducir una animación corta antes. Welcome se desliza hacia un lado y al usuario se le presenta el sitio web / aplicación debajo.

Estoy trabajando con bootstrap 3 como mi framework y estoy usando Animate.css para estas animaciones, junto con mi propio .moveup.

Tengo problemas extremos para mantener mi animación correctamente receptiva, tan pronto como cambio el tamaño de la pantalla, se rompe en más formas de las que mi pobre cabecita puede manejar.

La animación:
Se supone que la animación es de 5 elementos deslizándose hacia arriba, # ani_text_1 , #ani_plus , # ani_text_2 , #ani_equals y # ani_text_3 , en ese orden. Luego, otros 3 elementos, #ani_mcloud , #ani_man y #ani_check , se deslizan hacia abajo, y luego #ani_plus y #ani_equals , se deslizan más hacia arriba entre ellos, lo que finaliza la animación.

Editar - Enlace al sitio web en el que estoy trabajando. Puedes ver el funktionality actual aquí.
Editar - Aviso : debe hacer clic en el botón ''Jeg er klar'' para comenzar la animación.

Mi código:
HTML:

<div class="container-fluid">
  <div class="row">
    <div class="welcome">
      <div class="animate col-md-offset-2 col-md-8">
        <div class="row ani_drawing">
          <div class="col-md-4 col-sm-2">
            <img id="ani_mcloud" src="http://s33.postimg.org/5cnmfyam7/manycloud.png" class="wait_animation img-responsive center-block">
          </div>
          <div class="col-md-4 col-sm-2">
            <img id="ani_man" src="http://s33.postimg.org/v6strzl8f/man_indif2.png" class="wait_animation img-responsive center-block">
          </div>
          <div class="col-md-4 col-sm-2">
            <img id="ani_check" src="http://s33.postimg.org/v1p2ibdxb/check.png" class="wait_animation img-responsive center-block">
          </div>
        </div>
        <div class="row ani_text">
          <h4 id="ani_text_1" class="col-md-offset-1 col-md-2 wait_animation">Træk ikon og tekst der<br>passer bedst</h4>
          <div class="col-md-2">
            <img id="ani_plus" src="http://s33.postimg.org/3tnmx8enz/plus.png" class="wait_animation img-responsive center-block">
          </div>
          <h4 id="ani_text_2" class="col-md-2 wait_animation">Flyt det over på<br>ham her</h4>
          <div class="col-md-2">
            <img id="ani_equals" src="http://s33.postimg.org/syenane4f/equals.png" class="wait_animation img-responsive center-block">
          </div>
          <h4 id="ani_text_3" class="col-md-2 wait_animation">Få hjælp til at løse<br>din situation</h4>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

    .animate {
        padding-top: 8%;
    }
    #ani_mcloud,
    #ani_check {
        padding-top: 30%;
    }
    .moveup {
        position: relative;
        bottom: 130px;
    }
    .welcome {
        position: absolute;
        height: 100vh;
        width: 100vw;
        left: -9px;
        background-color: @white;
        z-index: 1;
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
    }
    .blue {
        background-color: @darkred;
    }
    .wait_animation {
        opacity: 0;
        transition: all 2s ease-in-out;
        -webkit-transition: all 2s ease-in-out;
        /** Chrome & Safari **/
        -moz-transition: all 2s ease-in-out;
        /** Firefox **/
        -o-transition: all 2s ease-in-out;
    }
    .animate img {
        width: 20%;
    }

jQuery:

$(''.wbutton'').on(''click'', function() {
  $(".welcome").toggleClass(''blue'');
  setTimeout(function() {
    $("#ani_text_1").toggleClass("animation fadeInUp");
  }, 700);
  setTimeout(function() {
    $("#ani_plus").toggleClass("animation fadeInUp");
  }, 900);
  setTimeout(function() {
    $("#ani_text_2").toggleClass("animation fadeInUp");
  }, 1100);
  setTimeout(function() {
    $("#ani_equals").toggleClass("animation fadeInUp");
  }, 1300);
  setTimeout(function() {
    $("#ani_text_3").toggleClass("animation fadeInUp").one(''webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'', function() {
      setTimeout(function() {
        $("#ani_mcloud").toggleClass("animation fadeInDown");
      }, 500);
      setTimeout(function() {
        $("#ani_cloud").toggleClass("animation fadeInDown");
      }, 700);
      setTimeout(function() {
        $("#ani_plus").toggleClass("moveup");
      }, 900);
      setTimeout(function() {
        $("#ani_man").toggleClass("animation fadeInDown");
      }, 1100);
      setTimeout(function() {
        $("#ani_equals").toggleClass("moveup");
      }, 1300);
      setTimeout(function() {
        $("#ani_check").toggleClass("animation fadeInDown");
      }, 1500);
    });
  }, 1500)
});

Gracias:
Cualquier ayuda, consejos o similares serán muy apreciados, estoy en mi ingenio, todo será bien recibido. Muchas gracias de antemano.

Editar - Si observa otros cambios que podrían hacerse para estabilizar el sitio, al verlo, siéntase libre de decirlo, agradeceré su crítica y me gustaría mejorar el sitio tanto como pueda.

Answer 1

Como todavía está esperando una respuesta aquí, le daré mi opinión sobre la situación. Seguí el enlace que se agregó, pero no creo haber visto un ejemplo de la animación de Bienvenida a la que te refieres en esa página (posiblemente esté deshabilitada en este momento, ya que sí veo parte del marcado). Por lo tanto, será un poco difícil dar una respuesta más detallada.

Para empezar, abordaré su animación de clase .moveup en el elemento #ani_plus. Parece que la propiedad principal del objetivo es bottom . Para garantizar que la animación funcione correctamente, debe existir un valor de inicio en el elemento antes de que la animación realmente lo afecte (parece que falta ese elemento en este momento). Entonces agrega lo siguiente:

#ani_plus {
  bottom: 0;
}

De esa forma, la transición sabe de qué valor inicial se debe animar. Una nota sobre lo anterior, es una mejor práctica para animar el elemento utilizando la propiedad de transform , y dejarlo en su posición final. Idealmente, algo como esto:

#ani_plus {
  transform: translateY(10%);
  transition: transform 2s ease-in-out;
}

.moveup {
  transform: translateY(0%);
}

Esto es más rápido de renderizar y, creo, más fácil de mantener (no tiene que preocuparse por la posición final).

De acuerdo, y tu pregunta original: sin saber cómo se supone que la página se comporta en vistas receptivas, solo puedo recomendarte que comiences con un elemento a la vez para evitar que te abrumen. Disminuya la ventana gráfica constantemente hasta que empiece a verse feo, luego realice un ajuste en ese elemento. Enjuague y repita hasta que las cosas se vean perfectas.

Si puede armar un violín para demostrar los problemas receptivos, estoy más que dispuesto a ayudarlo a depurar / proporcionar ideas. Déjame saber. ¡Con suerte, algo de esto fue útil de todos modos!