Difference between revisions of "Template:Harvard BioDesign/JS"

 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
            $(".timeline-item").hover(function () {
+
jQuery(document).ready(function($){
−
                $(".timeline-item").removeClass("active");
+
var timelineBlocks = $('.cd-timeline-block'),
−
                $(this).toggleClass("active");
+
offset = 0.8;
−
                $(this).prev(".timeline-item").toggleClass("close");
+
 
−
                $(this).next(".timeline-item").toggleClass("close");
+
//hide timeline blocks which are outside the viewport
−
            });
+
hideBlocks(timelineBlocks, offset);
 +
 
 +
//on scolling, 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');
 +
});
 +
}
 +
});

Latest revision as of 15:07, 3 July 2015

jQuery(document).ready(function($){ var timelineBlocks = $('.cd-timeline-block'), offset = 0.8;

//hide timeline blocks which are outside the viewport hideBlocks(timelineBlocks, offset);

//on scolling, 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'); }); } });