Ver Mensaje Individual
  #4 (permalink)  
Antiguo 11/08/2014, 01:39
Anonimo12
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 15 años, 7 meses
Puntos: 3
Respuesta: Activar animation cuando el usuario la tiene en frente

Buenas:

Gracias por las respuestas, a ver si me podéis echar un cable porque he intentado adaptarlo a mi código y no chuta aunque sea una tontería (me he basado en el ejemplo: http://voragine.net/weblogs/como-det...rlo-con-jquery ). Vamos a suponer que hay una única animación para dejarlo más sencillo aún:

Código HTML:
Ver original
  1. <article class="two">
  2.         <section class="text">
  3.             <p class="quest anim">Título</p><br />
  4.         </section>
  5.     </article>

La clase "quest" es la que tendrá el <p> en cualquier caso y la clase "anim" será la que se le quite o añada según se deba reproducir o no la animación.

Código CSS:
Ver original
  1. section.presentation article.two section.text {
  2.     width: 50%;
  3. }
  4.  
  5. section.presentation article.two section.text p.quest {
  6.     font-size: 0.6em;
  7. }
  8.  
  9. Esta la clase que posee la animación:
  10.  
  11. section.presentation article.two section.text p.anim {
  12.     animation: show-quest 1.5s;
  13. }

La función que hay en el ejemplo la he colocado dentro de etiquetas "<script>" en el "<head>", no sé si es correcto.

Código Javascript:
Ver original
  1. <head>
  2.     <script>
  3.         $(function () {
  4.           var $win = $(window);
  5.           var $pos = 450;
  6.           $win.scroll(function () {
  7.              if ($win.scrollTop() <= $pos)
  8.                $('.quest').removeClass('anim');
  9.              else {
  10.                $('.quest').addClass('anim');
  11.              }
  12.            });
  13.         });
  14.     </script>
  15. </head>
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...