diff options
Diffstat (limited to 'pydis_site/static/js/timeline/main.js')
| -rw-r--r-- | pydis_site/static/js/timeline/main.js | 68 |
1 files changed, 34 insertions, 34 deletions
diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js index 67a50d43..df0ef585 100644 --- a/pydis_site/static/js/timeline/main.js +++ b/pydis_site/static/js/timeline/main.js @@ -2,10 +2,10 @@ // 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.dates = this.element.getElementsByClassName("cd-timeline__date"); + this.blocks = this.element.getElementsByClassName("timeline-item"); + this.images = this.element.getElementsByClassName("timeline-icon"); + this.contents = this.element.getElementsByClassName("timeline-content"); + this.dates = this.element.getElementsByClassName("timeline-date"); this.offset = 0.8; this.hideBlocks(); }; @@ -19,9 +19,9 @@ 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"); - self.dates[i].classList.add("cd-timeline__date--hidden"); + self.images[i].classList.add("timeline-icon--hidden"); + self.contents[i].classList.add("timeline-content--hidden"); + self.dates[i].classList.add("timeline-date--hidden"); } })(i); } @@ -34,17 +34,17 @@ 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 ) { + if((self.contents[i].classList.contains("timeline-content--hidden") || self.contents[i].classList.contains("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.dates[i].classList.add("cd-timeline__date--bounce-in"); - self.images[i].classList.remove("cd-timeline__img--hidden"); - self.contents[i].classList.remove("cd-timeline__content--hidden"); - self.dates[i].classList.remove("cd-timeline__date--hidden"); - self.images[i].classList.remove("cd-timeline__img--bounce-out"); - self.contents[i].classList.remove("cd-timeline__content--bounce-out"); - self.dates[i].classList.remove("cd-timeline__date--bounce-out"); + self.images[i].classList.add("timeline-icon--bounce-in"); + self.contents[i].classList.add("timeline-content--bounce-in"); + self.dates[i].classList.add("timeline-date--bounce-in"); + self.images[i].classList.remove("timeline-icon--hidden"); + self.contents[i].classList.remove("timeline-content--hidden"); + self.dates[i].classList.remove("timeline-date--hidden"); + self.images[i].classList.remove("timeline-icon--bounce-out"); + self.contents[i].classList.remove("timeline-content--bounce-out"); + self.dates[i].classList.remove("timeline-date--bounce-out"); } })(i); } @@ -57,19 +57,19 @@ 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.dates[i].classList.remove("cd-timeline__date--bounce-in"); - self.images[i].classList.add("cd-timeline__img--bounce-out"); - self.contents[i].classList.add("cd-timeline__content--bounce-out"); - self.dates[i].classList.add("cd-timeline__date--bounce-out"); + if(self.contents[i].classList.contains("timeline-content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { + self.images[i].classList.remove("timeline-icon--bounce-in"); + self.contents[i].classList.remove("timeline-content--bounce-in"); + self.dates[i].classList.remove("timeline-date--bounce-in"); + self.images[i].classList.add("timeline-icon--bounce-out"); + self.contents[i].classList.add("timeline-content--bounce-out"); + self.dates[i].classList.add("timeline-date--bounce-out"); } })(i); } } - var verticalTimelines = document.getElementsByClassName("js-cd-timeline"), + var verticalTimelines = document.getElementsByClassName("timeline"), verticalTimelinesArray = [], scrolling = false; if( verticalTimelines.length > 0 ) { @@ -88,15 +88,15 @@ }); 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"); - } else if (event.target.classList.contains("cd-timeline__date--bounce-out")) { - event.target.classList.add("cd-timeline__date--hidden"); - event.target.classList.remove("cd-timeline__date--bounce-out"); + if (event.target.classList.contains("timeline-icon--bounce-out")) { + event.target.classList.add("timeline-icon--hidden"); + event.target.classList.remove("timeline-icon--bounce-out"); + } else if (event.target.classList.contains("timeline-content--bounce-out")) { + event.target.classList.add("timeline-content--hidden"); + event.target.classList.remove("timeline-content--bounce-out"); + } else if (event.target.classList.contains("timeline-date--bounce-out")) { + event.target.classList.add("timeline-date--hidden"); + event.target.classList.remove("timeline-date--bounce-out"); } } |