aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/js
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/static/js')
-rw-r--r--pydis_site/static/js/timeline/main.js104
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;
+ };
+})();