Animar.css + Viewport Comprobador de retraso?

Estoy usando un tutorial en el que se incorpora Animar.css y jQuery de la Ventanilla del Corrector para animar elementos en mi página(http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/).

Me pregunto cómo puede modificar estas animaciones por lo que cada animación que sucede en la sucesión, en lugar de todos a la vez. I. E. quiero que el primer elemento a animar y entonces como que uno está a punto de terminar el siguiente elemento empieza a animar, etc.

Aquí es lo que tengo hasta ahora, que anima a todos los elementos a la vez:

<div class="container">
    <div class="post">1</div>
    <div class="post2">2</div>
    <div class="post">3</div>
    <div class="post2">4</div>
    <div class="post">5</div>
    <div class="post2">6</div>
    <div class="post">7</div>
</div>

<script>
    $(document).ready(function(){
        $('.post').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInUp',
            offset: 100
        });
        $('.post2').addClass("hidden").viewportChecker({
            classToAdd: 'visible animated fadeInDown',
            offset: 100
        });
    });
</script>

JSFIDDLE

Cualquier ayuda que se agradece enormemente!!

InformationsquelleAutor user13286 | 2014-07-17

3 Kommentare

  1. 7

    Que en realidad no necesitan de la Ventanilla del Comprobador para esto. Ver este El VIOLÍN. Es menos código y hace la misma cosa. El único extra de código he añadido tenía que ver con el tiempo de las animaciones.

    //ANIMATION SCRIPT
    $(document).ready(function(){
        var i = 0;
        var posts = $('.container').children();
    
        function animateCircle() {
            if (i % 2 === 0) {
                $(posts[i]).addClass('visible animated fadeInUp');
            } else {
                $(posts[i]).addClass('visible animated fadeInDown');
            }
            i++;
            if (i <= posts.length) {
                startAnimation();
            }
        }
    
        function startAnimation() {
            setTimeout(function () {
                animateCircle();}, 1000);
        }
    
        posts.addClass('hidden');
        animateCircle(posts);
    });

    Pero si desea utilizar la Verificación de la Ventanilla, puede cambiar el animateCircle función:

    function animateCircle() {
        if (i % 2 === 0) {
            $(posts[i]).viewportChecker({
                classToAdd: 'visible animated fadeInUp',
                offset: 100
            });
        } else {
            $(posts[i]).viewportChecker({
                classToAdd: 'visible animated fadeInDown',
                offset: 100
            });
        }
        i++;
        if (i <= posts.length) {
            startAnimation();
        }

    Aquí es un El VIOLÍN muestra usando jquery ViewportChecker.

    • Wow. Esta respuesta va por encima y más allá. Muchas gracias, esto es precisamente lo que estaba buscando!!!
    • Me alegra poder ayudar!
  2. 4

    sé que este es un post anterior. Pero he encontrado esto por solo escribir «viewportchecker» en google.

    Aquí es una solución de trabajo para animar los elementos con retraso:

    $('.info-bar').find('li').addClass('hidden');
    $('.info-bar').viewportChecker({
        classToAdd: 'in-viewport',
        offset: 100,
        callbackFunction: function(elem) {
            var elements = elem.find('li'),
                i = 0;
            interval = setInterval(function(){
                elements.eq(i++).addClass('visible animated pulse');
                if(i==elements.length) {
                    clearInterval(interval);
                }
            },250);
        }
    });
    
    <ul class="info-bar">
      <li>some content</li>
      <li>some content</li>
      <li>some content</li>
      <li>some content</li>
      <li>some content</li>
    </ul>
  3. 1

    Usted puede lograr esto (Animar.css + Viewport Comprobador de retraso) por afinando un poco la ViewportChecker secuencia de comandos. Yo lo he hecho con la versión 1.7.4. Hay 3 modificaciones:

    1) Agregar un «retraso» opción con el valor por defecto 0:

    $.fn.viewportChecker = function(useroptions){
        //Define options and extend with user
        var options = {
            classToAdd: 'visible',
            classToRemove : 'invisible',
            offset: 100,
            repeat: false,
            invertBottomOffset: true,
            callbackFunction: function(elem, action){},
            scrollHorizontal: false,
            delay: 0 //HERE
        };
        ...

    2) Agregar los datos de «retardo» funcionalidad, de modo que el retraso puede ser especificado en la etiqueta html:

    //Loop through all given dom elements
    $elem.each(function(){
        var $obj = $(this),
            objOptions = {},
            attrOptions = {};
    
        // Get any individual attribution data
        if ($obj.data('vp-add-class'))
            attrOptions.classToAdd = $obj.data('vp-add-class');
        if ($obj.data('vp-remove-class'))
            attrOptions.classToRemove = $obj.data('vp-remove-class');
        if ($obj.data('vp-offset'))
            attrOptions.offset = $obj.data('vp-offset');
        if ($obj.data('vp-repeat'))
            attrOptions.repeat = $obj.data('vp-repeat');
        if ($obj.data('vp-scrollHorizontal'))
            attrOptions.scrollHorizontal = $obj.data('vp-scrollHorizontal');
        if ($obj.data('vp-invertBottomOffset'))
            attrOptions.scrollHorizontal = $obj.data('vp-invertBottomOffset');
        if ($obj.data('vp-delay')) //HERE
            attrOptions.delay = $obj.data('vp-delay');
        ...

    3) ajuste de las declaraciones que se ejecuta cuando el elemento está en la ventanilla, con una llamada setTimeout:

    //Add class if in viewport
    if ((elemStart < viewportEnd) && (elemEnd > viewportStart)){
         setTimeout(function() { //HERE
              //remove class
              $obj.removeClass(objOptions.classToRemove);
    
              $obj.addClass(objOptions.classToAdd);
    
              //Do the callback function. Callback wil send the jQuery object as parameter
              objOptions.callbackFunction($obj, "add");
          }, objOptions.delay);
          ...

    Uso

    HTML

    <div data-vp-animate="bounceInLeft" data-vp-delay="500">
        ...
    </div>

    CSS

    .hidden-o {
       opacity: 0;
     }
    .visible-o {
       opacity: 1;
    }

    JS

    $('[data-vp-animate]').each(function() {
        var classToAdd = 'visible-o animated '+($(this).data('vp-animate') ? $(this).data('vp-animate') : 'fadeIn');
    
        $(this).addClass('hidden-o').viewportChecker({
            classToAdd: classToAdd
       });
    });

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea