Ver Mensaje Individual
  #6 (permalink)  
Antiguo 26/05/2016, 03:02
Attreyu
 
Fecha de Ingreso: mayo-2016
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Sobre parallax y animaciones, unas cuantas dudas de novato

Gracias por tu ayuda!

He introducido el <script> y el <style> en el head de mi documento, pero lo que no me acaba de quedar claro son dos cosas:

- La ultima funcion que me has puesto, donde debo introducirla?? al final de documento dentro del <body>? en un archivo .js externo?

-Por otra parte, mi pagina consta de solo imagenes y muy poco texto
Código HTML:
<body>
  <img src="images/Imagen_completa.png" class="gwd-img-1d4y gwd-gen-1mypgwdanimation" id="fondo">
  <div class="animated bounceInLeft">
    <img src="assets/Untitled/Busqueda.png" class="gwd-img-1qg3" style="" id="busqueda">
  </div>
  <div class="animated bounceInLeft">
    <img src="images/Flecha1.png" class="gwd-img-qfc2 gwd-gen-1wp3gwdanimation" id="flecha1" style="">
  </div>
  <div class="animated bounceInDown">
    <img src="images/Analisis.png" class="gwd-img-1aya gwd-gen-gsklgwdanimation" id="analisis" style="">
  </div>
  <div class="animated bounceInDown">
    <img src="images/Flecha2.png" class="gwd-img-o636 gwd-gen-mtydgwdanimation" id="Flecha2" style="">
  </div>
  <div class="animated bounceInDown">
    <img src="images/Objetivo.png" class="gwd-img-zb19 gwd-gen-14i9gwdanimation" id="objetivo" style="">
  </div>
  <div class="animated bounceInRight">
    <img src="images/Flecha3.png" class="gwd-img-usvi gwd-gen-t2k4gwdanimation" id="flecha3" style="">
  </div>
  <div class="animated bounceInRight">
    <img src="images/Soluciones.png" class="gwd-img-1g95 gwd-gen-1gw6gwdanimation" id="soluciones" style="">
  </div>
  <img src="images/Sobre.png" class="gwd-img-5g8s gwd-gen-ctqbgwdanimation" id="sobre">
  <img src="images/Brazos.png" class="gwd-img-1w67 gwd-gen-1u59gwdanimation" id="brazos">
  <div class="animated bounceInDown"><img src="images/Burbujas.png" class="gwd-img-1ex9 gwd-gen-10d3gwdanimation" id="burbujas" style=""></div>
  <div class="animated zoomIn"><img src="images/Convirtiendolos.png" class="gwd-img-smu2 gwd-gen-khd8gwdanimation" id="convirtiendolos" style=""></div>
  <img src="images/Brazo1.png" class="gwd-img-crft gwd-gen-1u2hgwdanimation" id="Brazo1">
  <img src="images/Brazo2.png" class="gwd-img-y3b6 gwd-gen-1jewgwdanimation" id="brazo2">
  <img src="images/Brazo3.png" class="gwd-img-1b12 gwd-gen-9423gwdanimation" id="brazo3">
</body> 
Como puedes observar, son todo imagenes, que les he añadido un div con la animacion que quiero que hagan. Pero no se donde debo introducir la ultima parte que me has puesto. ¿Deberia ponerla en cada imagen a medida que se va haciendo scroll?
Disculpa mis escasos conocimientos, te ruego paciencia conmigo

Tambien me gustaria introducir una imagen de precarga, he encontrado [URL="http://codepen.io/austinmzach/pen/wxrAj"]esta[/URL] . Pero me encuentro con el mismo problema. El codigo html lo introduzco en el <body> al principio, pero el codigo <css>, ¿tengo que crear un archivo .css y meterlo todo? o lo meto en el <head>? Lo he intentado de las dos maneras y en ambas no me sale.



Por otra parte, quiero que algunas animaciones carguen cuando se haya terminado de cargar otra. Buscando por internet he encontrado el atributo animation-delay, es correcto? con esto conseguire que me carge en "secuencia"

Muchas gracias por todo.
Y disculpar si son demasiadas dudas jejeje. Pero ando un poco pez.

saludos!