From 9dd07df07075513de59c6acfeee2e60abbae763f Mon Sep 17 00:00:00 2001 From: GilbN Date: Fri, 8 Oct 2021 00:12:20 +0200 Subject: [PATCH] fade on theme switch button --- Resources/landing-page/css/custom.css | 40 +++++++++++++++++++++++++++ Resources/landing-page/js/scripts.js | 27 +++++++++++++++--- index.html | 4 +-- 3 files changed, 65 insertions(+), 6 deletions(-) diff --git a/Resources/landing-page/css/custom.css b/Resources/landing-page/css/custom.css index 2da13022..d651b934 100644 --- a/Resources/landing-page/css/custom.css +++ b/Resources/landing-page/css/custom.css @@ -374,4 +374,44 @@ p { #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.nord-hover { background: #2E3440; +} + + +@keyframes fadein { + from { + opacity:0; + } + to { + opacity:1; + } +} +@-moz-keyframes fadein { /* Firefox */ + from { + opacity:0; + } + to { + opacity:1; + } +} +@-webkit-keyframes fadein { /* Safari and Chrome */ + from { + opacity:0; + } + to { + opacity:1; + } +} +@-o-keyframes fadein { /* Opera */ + from { + opacity:0; + } + to { + opacity: 1; + } +} +body { + animation: fadein 2s; + -moz-animation: fadein 2s; /* Firefox */ + -webkit-animation: fadein 2s; /* Safari and Chrome */ + -o-animation: fadein 2s; /* Opera */ } \ No newline at end of file diff --git a/Resources/landing-page/js/scripts.js b/Resources/landing-page/js/scripts.js index 49c4ca45..757f6573 100644 --- a/Resources/landing-page/js/scripts.js +++ b/Resources/landing-page/js/scripts.js @@ -126,11 +126,30 @@ function createApps(apps) { } } +function fadeOutIn(speed ) { + let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)] + if (!document.body.style.opacity) { + document.body.style.opacity = 1; + } + var outInterval = setInterval(function() { + document.body.style.opacity -= 0.02; + if (document.body.style.opacity <= 0) { + clearInterval(outInterval); + injectTheme(theme) + document.getElementById("switch-theme").innerText = theme + var inInterval = setInterval(function() { + document.body.style.opacity = Number(document.body.style.opacity)+0.02; + if (document.body.style.opacity >= 1) + clearInterval(inInterval); + }, speed/50 ); + } + }, speed/50 ); + +} + injectTheme(random); addThemeData(); -document.getElementById("switch-theme").addEventListener("click", ()=> { - let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)] - injectTheme(theme) - document.getElementById("switch-theme").innerText = theme +document.getElementById("switch-theme").addEventListener("click", () => { + fadeOutIn(350); }) diff --git a/index.html b/index.html index 2c250c5b..f5ae4ab5 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ - + @@ -290,7 +290,7 @@ - +