fade on theme switch button

4 years ago · 9dd07df070
3 changed files with 65 additions and 6 deletions
--- 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 */
 }
--- 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);
 })

--- a/index.html
+++ b/index.html
@ -21,7 +21,7 @@
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
    <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.1">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.2">
 </head>

 <body id="page-top">
@ -290,7 +290,7 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <!-- Core theme JS-->
-    <script src="Resources/landing-page/js/scripts.js?v=1.3"></script>
+    <script src="Resources/landing-page/js/scripts.js?v=1.4"></script>
    <script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
    <script type="text/javascript">
        $(function () {