What is Waypoints?
Waypoints is the easiest way to trigger a function when you scroll to an element. Waypoints directory contains builds for jQuery and Zepto, as well as a version with no framework dependencies. For more information about waypoints is here.
Basic Waypoints coding
var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
notify('Basic waypoint triggered')
}
})
Benefits of Waypoints
Webpage when you scrolled down when site tagline section comes to the middle of screen, each of the social icons should dynamically get a ‘animate’ class. Social icons with this class to rotate 360o in a smooth manner. In the waypoints initialization script, we are making the widget title to fade in after 1.5 seconds and the widget text to fade in after 3.5 seconds.
How to used Waypoints
$(function() {
//ELEMENT called DIV
$('.element').waypoint(function() {
$('.element').addClass('animated bounceInLeft'); //Add the animate.css
}, {
offset: '50%'
});
});