I currently have it working with:
//Add a trigger to activate css animations on scroll
jQuery(document).ready(function($) { $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var elementTop = $('.splash-item1').offset().top;
if(scrollTop >= elementTop) {
$('.splash1 img').addClass('scrolled');
$('.splash2 p').addClass('scrolled');
$('.splash2 h3').addClass('scrolled');
}
});
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementTop = $('.splash-item2').offset().top;
if(scrollTop >= elementTop) {
$('.splash3 img').addClass('scrolled');
$('.splash4 p').addClass('scrolled');
$('.splash4 h3').addClass('scrolled');
}
});
});
The problem is that you have to scroll down pretty far for it to trigger. Any idea how to make it happen sooner?
http://seamlessthemes.com/demo/scholarships360/splash/
P.S. I have not finished this page yet nor the site. still a lot to do so it is messy still. :)