How do i make the content of the division appear when I scroll down

Question

I take this website as an example

http://paultrifa.com/envato/themeforest/scrolled/

I am learning how to make the contents appear fading in only when I scroll down. Currently I can use animate.css to help me do the fading in effects but I can't make it load only when I scroll down.

Everything is loaded even before I scroll down. Can someone please enlighten me on this? Really keen to learn this.

Answer 1

What I would do is bind a method to your window.scroll event, and when that scroll hits specific values you'll trigger specific animations functions that either animate the contents on screen probably via jQuery, or add classes with predefined css animations attached.

Step 1, something like this)

$(document).ready(function() {
  var firstAniWaiting = true,
      secondAniWaiting = true,
      thirdAniWaiting = true,

  checkScroll = function() {
    var currentScroll = $(window).scrollTop();

    if (currentScroll > 200 && firstAniWaiting) {
      firstAniWaiting = false;
      doMyFirstAni();

    } else if (currentScroll > 1000 && secondAniWaiting) {
      secondAniWaiting = false;
      doMySecondAni();

    } else if (currentScroll > 1500 && thirdAniWaiting) {
      thirdAniWaiting = false;
      doMyThirdAni();

      $(window).unbind();
    }
  };

  $(window).scroll(checkScroll);
}

Step 2, set css position values for all the elements in their PRE-animated states (i.e. hidden, or whatever). If you're using classes to to css3 animations, make sure to include a 'transition' value on the native class (meaning, the class that is always on the object and not the class that gets added later). Sorta like:

.thingToAni1 {
  position: relative;
  top: -500px;
  left: 0;
  transition: top 0.5s;
}     

.thingToAni1MoveIt { // This class gets added later
  top: 0; 
}

Step 3, create classes that have position values for the POST-animated states. (or) Step 3, something like this)

var doMyFirstAni = function() {
  $('.thingToAnimate1').animate({
    top: '20px',
    left: '100px'
  }, 200);

  $('.thingToAnimate2').animate({
    top: '20px',
    left: '300px'
  }, 200);
}

That's super rough, but hopefully that'll get you started.

Also, I didn't double check myself so if there's something I screwed up, leave a comment and I'll update my dumbness.