diff options
Diffstat (limited to '')
| -rw-r--r-- | pydis_site/settings.py | 1 | ||||
| -rw-r--r-- | pydis_site/static/css/home/timeline.css | 80 | ||||
| -rw-r--r-- | pydis_site/static/js/timeline/main.js | 37 |
3 files changed, 116 insertions, 2 deletions
diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 1ae97b86..2b9f77fb 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -80,6 +80,7 @@ else: 'api.pydis.com', 'admin.pydis.com', 'staff.pydis.com', + 'api.site', ] ) SECRET_KEY = env('SECRET_KEY') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 89de0887..0a4dfbb6 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3638,6 +3638,14 @@ mark { -webkit-animation-name: cd-bounce-2-inverse; animation-name: cd-bounce-2-inverse } + .cd-timeline__img--bounce-out { + -webkit-animation: cd-bounce-out-1 0.6s; + animation: cd-bounce-out-1 0.6s; + } + .cd-timeline__content--bounce-out { + -webkit-animation: cd-bounce-out-2 0.6s; + animation: cd-bounce-out-2 0.6s; + } } @-webkit-keyframes cd-bounce-1 { @@ -3741,3 +3749,75 @@ mark { transform: translateX(0) } } + +@-webkit-keyframes cd-bounce-out-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1) + } + + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } +} + +@keyframes cd-bounce-out-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } +} + +@-webkit-keyframes cd-bounce-out-2 { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0) + } + 60% { + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } +} + +@keyframes cd-bounce-out-2 { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0) + } + 60% { + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } +} diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js index a4bf4f31..2ff7df57 100644 --- a/pydis_site/static/js/timeline/main.js +++ b/pydis_site/static/js/timeline/main.js @@ -1,5 +1,5 @@ (function(){ - // Vertical Timeline - by CodyHouse.co + // Vertical Timeline - by CodyHouse.co (modified) function VerticalTimeline( element ) { this.element = element; this.blocks = this.element.getElementsByClassName("cd-timeline__block"); @@ -32,17 +32,36 @@ 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.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) { + 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; @@ -60,11 +79,25 @@ (!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; }; |