MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

Trigger a function when you scroll to an element

To do that, we are going to use Waypoints, which is, according to their website "the easiest way to trigger a function when you scroll to an element".

Step 1

Download and add the lib to your custom_enqueue_files function :

wp_enqueue_script( 'waypoints-js', plugin_dir_url( __FILE__ ) . 'assets/js/jquery.waypoints.min.js', array('jquery'),'', true );

Step 2

Prepare the element you want to trigger. As an example, we are going to use an Image, that will appear when it comes to the viewport. So first we add an image, then with some CSS we hide it :

#image-10-89 {
     opacity:0;
}

Step 3

Prepare the entrance animation. We create a new class, that we call "imagefx". We put back the opacity to 1 and we add some fun stuff. (as I am doing a 3D rotation, I am adding a perspective to the parent div. But you can skip the transform and perspective stuff if you only want a normal fade).

.imagefx {
     opacity:1!important;
     transition:2s ease all;
     transform:rotateX(-720deg);
}
#div_block-13-89 {
     perspective:800px 
}

Step 4

For the final step, we add our javascript code :

var waypoints = $('#image-10-89').waypoint(function(direction) {
    $("#image-10-89").addClass("imagefx");
    this.destroy()
}, {
    offset: '80%'
})

A quick explanation : The first line is the element we target. The offset means that when the image is at 80% from the top of the screen, we will add the "imagefx" class to it. And the destroy() function means that it will happen only one time. Everything is very well explained in their page : http://imakewebthings.com/waypoints/guides/getting-started

Now just scroll down to see the effect in action