I have followed this tutorial: http://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/ successfully. I would like to apply the fadein on almost every element on the page. This means using this jQuery method that I would ned to create separate Classes for each element and duplicate the code, because otherwise every element with the same class currently fades in with the first Waypoint only.
Here is what I had:
<script>
// hide our element on page load
$(‘.fade-in’).css(‘opacity’, 0);
$(‘.fade-in’).waypoint(function() {
$(‘.fade-in’).addClass(‘fadeInUp’);
}, { offset: ‘95%’ });
By following this page, I tried to adapt it to have:
</script>
But I couldn’t get it to work…any ideas please? (My Jquery could well be a bit off)
<script>
// hide our element on page load
$(‘.fade-in’).css(‘opacity’, 0);
var sticky = [];
$(‘.fade-in’).each(function(idx){
sticky[idx] = new Waypoint.Sticky({ element: this });
$({element: this}).addClass(‘fadeInUp’);
});
</script>
I’m also not sure how to add in the offset part.
Very many thanks
