I would like to implement a JavaScript solution that will animate the content of a nested DIV within a parent slide when the parent slide comes into view.
Currently, the content in the nested DIV only animates when a scroll command is triggered after the parent slide enters the screen. I suspect this is because the slide motion is animated and not controlled by scrolling.
This same issue can be seen in a JSFiddle demo I set up to investigate further:
(Please note that the sliding animation from right to left in the demo is simply for testing purposes and does not reflect the actual development features).
My question is, how can I create a script that triggers animations for each nested DIV whenever a slide element enters the viewport, without the need for a scroll event?
Any assistance would be greatly appreciated. Below is the script I am currently using to adjust opacity and other CSS styles.
$(document).ready(function() {
/* Trigger animations when the window is scrolled */
$(window).scroll(function() {
/* Animating hidden_header with delay */
$('.hidden_header').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is fully visible in the window, fade it in */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 500);
$(this).animate({
'right': '0'
}, 1500);
}
});
/* Animating hidden_content with delay */
$('.hidden_content').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is fully visible in the window, fade it in */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 3000);
$(this).animate({
'bottom': '0'
}, 3500);
}
});
/* Animating button with delay */
$('.button').each(function(i) {
var center_of_object = $(this).offset().left + $(this).outerWidth();
var center_of_window = $(window).scrollLeft() + $(window).width();
/* If the object is fully visible in the window, fade it in */
if (center_of_window > center_of_object) {
$(this).animate({
'opacity': '1'
}, 5000);
}
});
});
});