Sobre parallax y animaciones, unas cuantas dudas de novato

[Attreyu]

Buenos dias,

Me presento ya que este es mi primer post en esta comunidad. Estoy interesado en iniciarme en esto de las animaciones parallax y la verdad es que ando un poco perdido. Vengo a esta comunidad con la intencion de que me ayudeis en un par de dudas, que seguro que a la mayoria de vosotros os pareceran chorradas, pero a mi me impiden progresar.

Os cuento un poco.
Tengo una imagen bastante larga, la cual le quiero ir metiendo animaciones. He estado usando el programa Google Web Designer. Y he conseguido crear las animaciones, pero como es logico no se me cargan al hacer el scroll, si no que se me cargan todas a la vez. He encontrado un par de tutoriales en internet de como meter esa animacion a medida que se va haciendo scroll, incluso en esta misma comunidad hay unos cuantos post con esas dudas. Pero pese a todo el material que he encontrado, no se introducirlo correctamente. No se donde tengo que meter todo eso para que me funcione. Actualmente tengo mi archivo index.html y una carpeta de imagenes que son las que se van cargando.

Tambien tengo localizada la libreria animated.css y algun tutorial de como usarla.
Agradeceria cualquier tipo de ayuda.
Se que tengo pocos conocimientos de programacion web, no os desespereis conmigo jeje.

Un saludo!

[Rafael]

Básicamente son tres partes.

1) Una animación CSS comienza al cargarse la página, a partir de ahí comienza el contador que le hayas puesto a tu css.

2) Para que una animación comience no al cargar la página, sino al momento que hagas scroll y veas el elemento, la página tiene que detectar dónde está el scroll, y esto no lo haces con Css, sino con un JavaScript. Este JavaScript detecta la posición del scroll.

3) A partir de ahí puede suceder por ejemplo una cosa. Que en ese momento el JavaScript asigne la animación. Entonces la animación no va a existir antes, por ejemplo tu animación debería estar en un class:

<div class="Anim">

Bueno, la cosa es que este class no esté desde el principio, <div class=""> sino con el JavaScript cuando esté en la posición scroll correcta Pum, le pone el class="Anim" y entonces comienza la animación.

Más o menos por ahí va la cosa. Esa es una opicópn de varias.

Pero de ahí tendrás que buscar que juego de JavaScript+Css te gusta más.

[Attreyu]

Buenos dias,

Primeramente gradecer tu respuesta, me es de gran ayuda. Con lo que me has comentado, he encontrado lo siguiente.
http://www.miguelmanchego.com/2014/jquery-mostrar-animaciones-segun-te-desplazas-por-la-pagina/
El cual me dice que debo descargarme le JQuery Waypoints, me lo descargo, pero no se que hacer con el. Lo descomprimo y me aparecen los siguientes archivos y carpetas.

Luego tambien dice que para implementarlo debo introducir

Código:

jQuery(function($) {
$('.elemento_deseo_animar').waypoint(function() {
$(this).toggleClass( 'bounceIn animated' );
},
{
offset: '70%',
triggerOnce: true
});

Creeis que esto que estoy mirando es lo que necesito??
Muchas gracias!
Un saludo!

[Attreyu]

Perdon por el doble post, pero realmente necesito que me echeis una mano, ya que ando bastante perdido.
Como bien os puse en la imagen, tengo una serie de carpetas que no se introducir en la carpeta de la web, ya que actualmente lo tengo asi.
Web
../images
../index.html

Donde deberia introducir ese plugin que he encontrado(js.wayponints)? como debo declararlas en el archivo index.html??

Muchas gracias!

[Rafael]

Hum. Acá está el demo de ese tutorial:

http://miguelmanchego.com/samples/20...nimaciones.htm

Si ves el código fuente de la página notarás que necesitas simplemente 3 recursos:

Código HTML:

<link href="animate.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="waypoints.min.js"></script>
 

El animate y el waypoints están alojados en tu sitio y el Jquery jalado desde googleapis.

Y el código necesario para que funcione en lo que tu gustas. Son dos partes, el JavaScript que le indica al waypoints y los estilos a utilizar:

Código HTML:

<script type="text/javascript">
    jQuery(function($) { 
        $('h2').waypoint(function() {
            $(this).toggleClass( 'bounceIn animated' );
        },
        {
            offset: '70%',
            triggerOnce: true
        });
        
        $('li').waypoint(function() {
            $(this).toggleClass( 'fadeInLeft animated' );
        },
        {
            offset: '70%',
            triggerOnce: true
        });        
        
        $('img').waypoint(function() {
            $(this).toggleClass( 'rotateIn animated' );
        },
        {
            offset: '70%',
            triggerOnce: true
        });        
    });
    </script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .container {
            width: 320px;
            margin: auto;
            font-size: 14px;
            color:#333;            
        }
        .container p, .container li{
            line-height: 24px;
        }
        .container li {
            padding-bottom: 10px;
            opacity: 0;
        }
        .container h2 {
            margin-top: 25px;
            opacity: 0;
        }
        h1 { font-size: 34px; }
        h2 { font-size: 28px; }
        img { opacity:0; }
    </style>
 

Eso está resumido en estas instrucciones:

Código HTML:

jQuery(function($) {
$('.elemento_deseo_animar').waypoint(function() {
$(this).toggleClass( 'bounceIn animated' );
},
{
offset: '70%',
triggerOnce: true
});
 
});
 

Pero aparte de eso debes dejar otros archivos como las licencias de animate y waypoints en tu sitio.

[Attreyu]

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!

[Rafael]

De el otro post. Las Instrucciones que te puse son las mismas que vienen en el tutorial que tú mismo ligaste. Son las instrucciones genéricas de lo que ya viene en el script del ejemplo.

He introducido el <script> y el <style> en el head de mi documento

Pues eso, ya.

donde debo introducirla?? al final de documento dentro del <body>? en un archivo .js externo?

Ojo que eso es una pregunta genérica que no tiene que ver con el waypoints. Así que te dejo de tarea cómo puedes poner JavaScript en un documento, hay varios "niveles".

En este caso, como te escribí arriba

Si ves el código fuente de la página notarás que necesitas simplemente 3 recursos:

Son sólo esos tres recursos, lo que significa que lo demás va dentro del head de tu documento y ya.

Te explico la base:

<script type="text/javascript">
jQuery(function($) {
$('img').waypoint(function() {
$(this).toggleClass( 'rotateIn animated' );
},
{
offset: '70%',
triggerOnce: true
});

Lo rojo te marca que cosa quieres animar. En este caso las etiquetas img.

Si quieres animar un objeto en particular le pones un id. <img id="AnimarSoloEsto">

$('#AnimarSoloEsto').waypoint(function() {

Y lo mismo para un class.

$('.AnimarEstos').waypoint(function() {

Igual que el css. # para el id y un punto . para los class.

---

Lo que noto es que el Waypoints descargado del sitio original no jala en este ejemplo, así que descarga este: view-source:http://miguelmanchego.com/samples/2014/waypoints.min.js

[Attreyu]

Muchas Gracias!

La verdad es que he avanzado un poco gracias a ti.

Voy a trabajar con ello y te digo.

Un saludo y mil gracias de nuevo :)