Play animation when content get into view

Question

I've been searching on many posts but almost all of them are confusing.

I'm working with animate.css into a which is at the middle of my page. For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).

Please, don't say about JS Reveal, i'd like to use the animation from animate.css

What i was trying: HTML

<!-- Others div above -->

<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->

JS

  function Animar() {
setTimeout(function(){
   document.getElementById("sf-medida").style.visibility = "visible";
   $("#titulo-general").addClass("animated fadeInLeft");
   $(".sub-titulo").addClass("animated bounceInRight");

  $(".titulo-izquierda").addClass("animated swing");
  $(".texto-1").addClass("animated fadeIn");
  $(".texto-2").addClass("animated fadeIn");

},1000)

}

But it doesn't work, however, i've tried adding

window.addEventListener("scroll", Animar);

But what it does is that the animation is played whenever i scroll on the page,

Have you looked into `.scrollTop()` and `$(window).height()` ? With those you can do basic calculations to determine if and when the video is in view and then tell it to play. — Hastig Zusammenstellen, May 12 '17 at 23:36
I saw it on another post, but i didn't understand how it works (i don't know neither how .scrollTop() works) — AtarC5, May 13 '17 at 01:48

Sam · Accepted Answer · 2017-05-13T10:34:23.393

This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference

$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
    if( v1 > v2 ){
  console.log('in');
    $('.box').addClass('animated flip')
  }
});
});

So as per your request, let me try to explain the code line by line

$(document).ready(function(){

This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.

$(document).scroll(function(evt){

This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.

var v1 = $(this).scrollTop();

This code will get the amount of scrolling user had done in pixels.

var v2 = Math.abs($('.box').position().top - $(window).height()/2);

This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.

$('.box').addClass('animated flip')

Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.

could you explain a bit the pseudo-code?, please and thank you so much for your answer — AtarC5, May 13 '17 at 01:47
So i updated my answer and added detailed explanation of code — Sam, May 13 '17 at 08:10

score 2 · Answer 2 · answered May 12 '17 at 23:17

2

I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code

<div class="wow fadeIn">content</div>

Here, take a look: http://mynameismatthieu.com/WOW/docs.html

answered May 12 '17 at 23:17

Vladimir Jovanović

2,330
3
13
34

score 1 · Answer 3 · edited May 23 '17 at 12:02

Here's an example using Jquery.

In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)

The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)

fiddle

note, the video won't load on stack so be sure to view the fiddle

https://jsfiddle.net/Hastig/xszu6b1p/

I scraped it together from these two answers..

Youtube Autoplay

Ladyload Images

$(window).scroll(function() {
  $.each($('iframe'), function() {
    if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
      var source = $(this).data('src');
      $(this).attr('src', source);
      $(this).removeAttr('data-src');
    }
  })
})

body {
  margin: 0;
}
.filler {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
  /* css tricks - responsive iframe video */
  /* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
  position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
  display: flex;
  justify-content: center;
  background-color: red;
}
.video-container iframe {
  position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
  <iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>

Play animation when content get into view

3 Answers3