32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
|
|
jQuery(document).ready(function($) {
|
|
var timelineBlocks = $('.cd-timeline-block');
|
|
const OFFSET = 0.8;
|
|
|
|
// Hide timeline blocks which are outside the viewport
|
|
hideBlocks(timelineBlocks, OFFSET);
|
|
|
|
// On scrolling, show & animate timeline blocks when enter the viewport
|
|
$(window).on('scroll', function() {
|
|
!window.requestAnimationFrame
|
|
? setTimeout(function() {
|
|
showBlocks(timelineBlocks, OFFSET);
|
|
}, 100)
|
|
: window.requestAnimationFrame(function() {
|
|
showBlocks(timelineBlocks, OFFSET);
|
|
});
|
|
});
|
|
|
|
function hideBlocks(blocks, offset) {
|
|
blocks.each(function() {
|
|
($(this).offset().top > $(window).scrollTop() + $(window).height() * offset) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
|
|
});
|
|
}
|
|
|
|
function showBlocks(blocks, offset) {
|
|
blocks.each(function() {
|
|
($(this).offset().top <= $(window).scrollTop() + $(window).height() * offset && $(this).find('.cd-timeline-img').hasClass('is-hidden')) && $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
|
|
});
|
|
}
|
|
});
|