Mirrors/theme.park
1
0
Fork 0
mirror of https://github.com/gilbN/theme.park.git synced 2024-08-17 23:49:37 +02:00
Code Issues Releases Wiki Activity

fade on theme switch button

Browse Source
This commit is contained in:
GilbN 2021-10-08 00:12:20 +02:00
parent 317da9022c
commit 9dd07df070
3 changed files with 65 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
Resources/landing-page/css/custom.css
View File

@ -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 */
}

27
Resources/landing-page/js/scripts.js
View File

@ -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);
})

4
index.html
View File

@ -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 () {