Activar animation cuando el usuario la tiene en frente

Anonimo12 · #1 (**permalink**) 10/08/2014, 19:40

Buenas, tengo un duda muy sencilla que seguro que me podéis solucionar en un "plis plas".

En mi web tengo el siguiente bloque:

Código HTML:

Ver original<article class="two">
    <section class="text">
        <p class="quest">Título</p><br />
        <p class="answer">Texto</p>
    </section>
</article>

Y le tengo puesto una animación a la clase "quest" y otra a la clase "answer" con CSS:

Código CSS:

Ver originalsection.presentation article.two section.text {
    width: 50%;
}
 
section.presentation article.two section.text p.quest {
    font-size: 0.6em;
    animation: show-quest 1.5s;
}
 
section.presentation article.two section.text p.answer {
    font-size: 0.4em;   
    animation: show-answer 1.6s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s
}

Las animaciones las hago con keyframes y funcionan perfectamente, no pongo el código porque es muy largo pero si es necesario me lo comentáis y lo coloco sin problema.

Ahora, antes de llegar al bloque de la animación hay otros bloques y textos.

Lo que no consigo hacer es que la animación se active únicamente cuando el usuario baja la página hasta tener en frente el article que la contiene. Por tanto, nada mas cargar la página se ejecuta y cuando el usuario llega abajo no la ve ¡dish!.

He intentado hacerlo con las pseudo-clases hover y focus pero nada. Es muy muy muy sencillo pero no lo veo claro y necesito una ayudita.

En definitiva: Necesito que los animation se ejecuten solo cuando el usuario las tenga en frente.

Thanks. Un saludo.

AitorDB · #2 (**permalink**) 10/08/2014, 20:53

Mira esto, quizá te oriente, he pensado en medir el scroll del usuario, aunque tendrás que tener en cuenta el tamaño de la pantalla/zoom porque el usuario podría verlo sin necesidad de scroll... No se, supongo que es complicado, seguramente alguien sepa más de este tema que yo, pero espero aportar mi granito de arena.

http://voragine.net/weblogs/como-detectar-si-se-esta-haciendo-scroll-en-una-pagina-y-como-cuantificarlo-con-jquery

Suerte!

Alexis88 · #3 (**permalink**) 10/08/2014, 23:52

Para ejecutar una animación en el momento en el que el usuario visualice un elemento (suponiendo que al inicio no pueda porque este se encuentra más abajo), necesitas calcular la altura desplazada de la barra vertical de desplazamiento y realizar una comparación con la altura del elemento menos la del documento, para lo cual necesariamente tendrás que echar mano de JavaScript. Aquí puedes ver un pequeño ejemplo que hice.

Saludos

Anonimo12 · #4 (**permalink**) 11/08/2014, 01:39

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<article class="two">
        <section class="text">
            <p class="quest anim">Título</p><br />
        </section>
    </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 originalsection.presentation article.two section.text {
    width: 50%;
}
 
section.presentation article.two section.text p.quest {
    font-size: 0.6em;
}
 
Esta la clase que posee la animación:
 
section.presentation article.two section.text p.anim {
    animation: show-quest 1.5s;
}

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<head>
    <script>
        $(function () {
          var $win = $(window);
          var $pos = 450;
          $win.scroll(function () {
             if ($win.scrollTop() <= $pos)
               $('.quest').removeClass('anim');
             else {
               $('.quest').addClass('anim');
             }
           });
        });
    </script>
</head>

pzin · #5 (**permalink**) 11/08/2014, 02:25

Se supone que por defecto tienes que quitar la clase del HTML ¿no?

Anonimo12 · #6 (**permalink**) 11/08/2014, 05:23

Cita:

Se supone que por defecto tienes que quitar la clase del HTML ¿no?

¡Cierto!, lo he dejado así:

Código HTML:

Ver original<article class="two">
   <section class="text">
   <p class="quest">Título</p><br />
   </section>
</article>

Sin embargo sigue sin activarse en el momento correcto. ¿Podría alguien probar el código siendo tan cortito y decirme dónde está el problema?.

Gracias pzin. Un saludo.

AitorDB · #7 (**permalink**) 11/08/2014, 08:24

Cuando dices el momento correcto ¿te refieres a que el usuario sigue sin verlo?, ¿que solo lo ve a medias?

Anonimo12 · #8 (**permalink**) 11/08/2014, 12:03

Cita:

Se supone que por defecto tienes que quitar la clase del HTML ¿no?

Cuando el usuario ha bajado 450 píxeles.

Anonimo12 · #9 (**permalink**) 11/08/2014, 13:36

Un cable please, seguro que alguien puede ver el problema en un plis plas.

Gracias.