diff options
Diffstat (limited to 'pydis_site/static/js')
-rw-r--r-- | pydis_site/static/js/timeline/main.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js new file mode 100644 index 00000000..2ff7df57 --- /dev/null +++ b/pydis_site/static/js/timeline/main.js @@ -0,0 +1,104 @@ +(function(){ + // Vertical Timeline - by CodyHouse.co (modified) + function VerticalTimeline( element ) { + this.element = element; + this.blocks = this.element.getElementsByClassName("cd-timeline__block"); + this.images = this.element.getElementsByClassName("cd-timeline__img"); + this.contents = this.element.getElementsByClassName("cd-timeline__content"); + this.offset = 0.8; + this.hideBlocks(); + }; + + VerticalTimeline.prototype.hideBlocks = function() { + if ( !"classList" in document.documentElement ) { + return; // no animation on older browsers + } + //hide timeline blocks which are outside the viewport + var self = this; + for( var i = 0; i < this.blocks.length; i++) { + (function(i){ + if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { + self.images[i].classList.add("cd-timeline__img--hidden"); + self.contents[i].classList.add("cd-timeline__content--hidden"); + } + })(i); + } + }; + + VerticalTimeline.prototype.showBlocks = function() { + if ( ! "classList" in document.documentElement ) { + return; + } + var self = this; + for( var i = 0; i < this.blocks.length; i++) { + (function(i){ + if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) { + // add bounce-in animation + self.images[i].classList.add("cd-timeline__img--bounce-in"); + self.contents[i].classList.add("cd-timeline__content--bounce-in"); + self.images[i].classList.remove("cd-timeline__img--hidden"); + self.contents[i].classList.remove("cd-timeline__content--hidden"); + self.images[i].classList.remove("cd-timeline__img--bounce-out"); + self.contents[i].classList.remove("cd-timeline__content--bounce-out"); + } + })(i); + } + }; + + VerticalTimeline.prototype.hideBlocksScroll = function () { + if ( ! "classList" in document.documentElement ) { + return; + } + var self = this; + for( var i = 0; i < this.blocks.length; i++) { + (function(i){ + if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { + self.images[i].classList.remove("cd-timeline__img--bounce-in"); + self.contents[i].classList.remove("cd-timeline__content--bounce-in"); + self.images[i].classList.add("cd-timeline__img--bounce-out"); + self.contents[i].classList.add("cd-timeline__content--bounce-out"); + } + })(i); + } + } + + var verticalTimelines = document.getElementsByClassName("js-cd-timeline"), + verticalTimelinesArray = [], + scrolling = false; + if( verticalTimelines.length > 0 ) { + for( var i = 0; i < verticalTimelines.length; i++) { + (function(i){ + verticalTimelinesArray.push(new VerticalTimeline(verticalTimelines[i])); + })(i); + } + + //show timeline blocks on scrolling + window.addEventListener("scroll", function(event) { + if( !scrolling ) { + scrolling = true; + (!window.requestAnimationFrame) ? setTimeout(checkTimelineScroll, 250) : window.requestAnimationFrame(checkTimelineScroll); + } + }); + + function animationEnd(event) { + if (event.target.classList.contains("cd-timeline__img--bounce-out")) { + event.target.classList.add("cd-timeline__img--hidden"); + event.target.classList.remove("cd-timeline__img--bounce-out"); + } else if (event.target.classList.contains("cd-timeline__content--bounce-out")) { + event.target.classList.add("cd-timeline__content--hidden"); + event.target.classList.remove("cd-timeline__content--bounce-out"); + } + } + + window.addEventListener("animationend", animationEnd); + window.addEventListener("webkitAnimationEnd", animationEnd); + } + + function checkTimelineScroll() { + verticalTimelinesArray.forEach(function(timeline){ + timeline.showBlocks(); + timeline.hideBlocksScroll(); + }); + scrolling = false; + }; +})(); |