jQuery Run CSS Animation only when content is visible to the user

Navigation
3

I'm using an animation library called Animate.css which can be viewed clicking here .

However, when you create an effect for a certain div , the effect is activated even though div is not visible on the screen, ie you still have to scroll the page so that ' / p>

Here is the jQuery code I'm using: 

$('#galeria-fotos-home').addClass('animated bounceInUp');

I want the effect to be enabled only when'iviv 'is visible, such as in this site . Note that when scrolling the page the effects will appear.

    
asked by anonymous 22.09.2016 / 15:14

3 answers

3

The problem is that you are (probably) adding the class when the DOM is ready (i.e. $(document).ready()... ), and that is not to say that the element is visible. You can create a method that checks the "visibility" of an element during scroll . See (removed from here ): 

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

and link it to scroll as follows 

$(window).on('scroll', function(){
    if(isScrolledIntoView('.elemento')){
        console.log('elemento visivel');
    }
});

Notice that this approach is costly, because this method will run every time that the scroll event occurs. For several elements, you may have performance issues.

Another point of attention is that you can only add the class .bounceIn , without worrying about .animated . Here is a minimal example: 

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on('scroll', function(){
  if(isScrolledIntoView('.animated')){
    $('.animated').addClass('bounceIn');
  }
  else{
    $('.animated').removeClass('bounceIn');
  }
});
.dummy{
  padding: 1em;
  border: 1px solid black;
  width: 50%;
  margin: 0 auto;
}

.animated{
  margin: 1em auto;
  text-align: center;
  border: 1px solid red;
  padding: 1em;
  width: 30%;
}

.animated.bounceIn{
  animation-duration: .75s;
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus similique excepturi, incidunt doloribus cum! Atque pariatur nostrum autem quaerat quis libero velit eligendi eaque culpa deserunt neque molestias dolorum nobis ab possimus aperiam quam vero corporis, qui unde debitis ut facilis, consequatur, laboriosam! Accusamus neque debitis nemo, harum mollitia magnam ratione aliquid optio, quia tempore earum! Culpa, rem. Perferendis animi doloribus maiores maxime quos repellendus iste, ex architecto a vel placeat cum nesciunt aliquam similique! Sunt est obcaecati illo rerum qui, inventore at. Doloremque nam animi eveniet consequuntur soluta architecto! Quae deserunt quisquam, libero ex labore mollitia quibusdam maiores commodi quaerat odio quam magnam minima praesentium corporis molestiae sint esse laudantium fuga impedit autem id. Dolore iure ex iste ad praesentium quidem omnis minus saepe facere nesciunt dignissimos soluta hic suscipit molestias rerum ut veritatis itaque eum voluptatibus non, modi corporis, laudantium earum perspiciatis. Fuga sint mollitia sit deserunt ab porro maiores, laudantium quae obcaecati optio corporis aut quidem nisi blanditiis eius veritatis animi, hic fugiat exercitationem! Tempore aut, corporis facilis iure voluptatem eaque libero amet odit culpa, esse. Alias, harum, maiores! Error laborum nostrum earum aliquam architecto repudiandae magni voluptatibus iusto deserunt. Blanditiis saepe tempore totam repellendus voluptates veniam molestias quia beatae adipisci optio eligendi, quae quos inventore tempora ad harum vel, aspernatur minima eos iste recusandae. Iusto ipsum tenetur, fugit autem nesciunt unde doloribus eligendi voluptatem quam odit in quae reprehenderit cum deserunt provident. Quia tempore enim, maxime minus quisquam repellat hic ea fugit nostrum iusto adipisci temporibus vero natus, illo. Tempora itaque est praesentium eaque vel et quasi iste recusandae non aspernatur fugit soluta laboriosam nulla voluptas quidem esse error, hic numquam odio repudiandae nihil ipsa, atque dolorum quisquam? Minus perferendis consectetur accusantium veniam amet, in, nulla iste voluptatem, mollitia ipsum facere dolores. Provident repudiandae non assumenda nostrum nam velit qui, ex impedit illo expedita animi adipisci enim eius natus voluptatibus porro consectetur quis. Dignissimos, excepturi dolorum aut libero laudantium obcaecati nobis perspiciatis iure. Nobis dicta amet consequatur necessitatibus deserunt exercitationem ipsum vero error nulla, aliquid inventore voluptatum possimus omnis voluptatibus suscipit velit nam, perferendis quos asperiores quisquam voluptates ducimus consequuntur sed. Eveniet deleniti, reprehenderit aliquid animi! Mollitia debitis quidem, amet consequatur nemo laudantium voluptatum recusandae, necessitatibus dicta nam alias, itaque eum rerum. Iure illum, natus dolor explicabo quae nam consequatur cupiditate, soluta</div>

<div class="animated">See me bounce!</div>

I think your problem can be solved like this. But fortunately, if you want to do animations based on scroll , this library is excellent.

    
22.09.2016 / 15:57
0

IE7 or higher: link 

function onVisibilityChange(el, callback) {
    var old_visible;
    return function () {
        var visible = isElementInViewport(el);
        if (visible != old_visible) {
            old_visible = visible;
            if (typeof callback == 'function') {
                callback();
            }
        }
    }
}

var handler = onVisibilityChange($('#galeria-fotos-home'), function() {

    $('#galeria-fotos-home').addClass('animated bounceInUp');

    //uma vez que já tenha sido iniciada a animação, vamos desativá-la
    $(window).on('DOMContentLoaded load resize scroll', function(){}); 

});


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler);

Note that keeping track of page scrolling brings a layer of considerable complexity to your application, see if it's really worth incorporating this feature. If a looping animation succeeds, better.

    
22.09.2016 / 15:21
0

What I was doing was a function that detects whether or not the user is seeing the div ...

To know what the user is seeing 

var init = $(window).scrollTop();     
var end  = $(window).height()+$(window).scrollTop();
// o utilizador ve tudo que estiver entre o $init e o $end

To know the position of the div 

var init = $('.div').offset().top
var end  = $('.div').offset().top+$('.div').height()

I hope you have explained me well;)

Functions you'll need:

22.09.2016 / 15:47
Set a default zoom for google maps How to allow the execution of html tags from a variable in angular?