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

(Created page with " div { font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; } .timeline { width: ...")
 
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
            div {
+
jQuery(document).ready(function($){
−
                font-family: Helvetica, Arial, sans-serif;
+
var timelineBlocks = $('.cd-timeline-block'),
−
                box-sizing: border-box;
+
offset = 0.8;
−
            }
+
 
−
            .timeline {
+
//hide timeline blocks which are outside the viewport
−
                width: 400px;
+
hideBlocks(timelineBlocks, offset);
−
            }
+
 
−
            .timeline .timeline-item {
+
//on scolling, show/animate timeline blocks when enter the viewport
−
                width: 100%;
+
$(window).on('scroll', function(){
−
            }
+
(!window.requestAnimationFrame)
−
            .timeline .timeline-item .info, .timeline .timeline-item .year {
+
? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
−
                color: #eee;
+
: window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
−
                display: block;
+
});
−
                float:left;
+
 
−
                -webkit-transition: all 1s ease;
+
function hideBlocks(blocks, offset) {
−
                -moz-transition: all 1s ease;
+
blocks.each(function(){
−
                transition: all 1s ease;
+
( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) && $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
−
            }
+
});
−
            .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {
+
}
−
                color: #ccc;
+
 
−
                -webkit-transition: all 1s ease;
+
function showBlocks(blocks, offset) {
−
                -moz-transition: all 1s ease;
+
blocks.each(function(){
−
                transition: all 1s ease;
+
( $(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');
−
            }
+
});
−
            .timeline .timeline-item .year {
+
}
−
                font-size: 24px;
+
});
−
                font-weight: bold;
+
−
                width: 22%;
+
−
            }
+
−
            .timeline .timeline-item .info {
+
−
                width: 100%;
+
−
                width: 78%;
+
−
                margin-left: -2px;
+
−
                padding: 0 0 40px 35px;
+
−
                border-left: 4px solid #aaa;
+
−
                font-size: 14px;
+
−
                line-height: 20px;
+
−
            }
+
−
            .timeline .timeline-item .marker {
+
−
                background-color: #fff;
+
−
                border: 4px solid #aaa;
+
−
                height: 20px;
+
−
                width: 20px;
+
−
                border-radius: 100px;
+
−
                display: block;
+
−
                float: right;
+
−
                margin-right: -14px;
+
−
                z-index: 2000;
+
−
                position: relative;
+
−
            }
+
−
            .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
+
−
                color: #444;
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
            }
+
−
            .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {
+
−
                color: #9DB668;
+
−
            }
+
−
            .timeline .timeline-item .marker .dot {
+
−
                background-color: white;
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
                display: block;
+
−
                border: 4px solid white;
+
−
                height: 12px;
+
−
                width: 12px;
+
−
                border-radius: 100px;
+
−
                float: right;
+
−
                z-index: 2000;
+
−
                position: relative;
+
−
            }
+
−
            .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
+
−
                -webkit-transition: all 1s ease;
+
−
                -moz-transition: all 1s ease;
+
−
                transition: all 1s ease;
+
−
                background-color: #9DB668;
+
−
                box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
+
−
            }
+

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'); }); } });