The task is simple, to realize the smooth appearance of blocks when scrolling.

Already tried differently. Only the variant with direct prescription of block behavior in jquery-CSS works. BUT!!! I'm wondering why adding the Animate.css class doesn't work? At the same time, I don’t understand whether it is necessary to hide the element initially, because if you don’t show, the scrolling is intermittent, with delays.

Strongly kicked not kicked. If you make a mistake in the design please politely indicate.

It was just that the second day was already stuck on this, everything that could be viewed on the topic, looked through, and videos and articles, both in Russian and in English.

$(window).scroll(function() { $('#bootstrap-block').each(function(){ if ($(window).scrollTop()>50) { $(this).toggleClass('animated fadeUp'); } }); });

I am writing on the site "Kodruchka.oi."

 $(window).scroll(function(){ $('.mov').each(function(){ var blockPos = $(this).offset().top; var topWindow = $(window).scrollTop(); if (blockPos < topWindow+300){ $(this).addClass('fadeUp') } }); }); 
 <body> <div class="container">Example <div class="col-md-12 animated">Example</div> </div> </body>

    1 answer 1

    Read this article
    In fact, you just need to connect a small js library and it will catch the moment when the object, to which you assign the class, appears in the user's field of vision. And about the smoothness and concealment, the element should not prescribe display:none; or .hide() , but you need to set opacity:0; with a further change to 1 (if you assign the entire css to yourself, then you should also specify the transition, etc. but I think you know it all), this will allow you to work out the initial offset of the block beyond the user's visibility and then plan to appear.