mirror of
https://github.com/gilbN/theme.park.git
synced 2024-09-11 19:32:24 +02:00
fade on theme switch button
This commit is contained in:
parent
317da9022c
commit
9dd07df070
@ -374,4 +374,44 @@ p {
|
|||||||
|
|
||||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.nord-hover {
|
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.nord-hover {
|
||||||
background: #2E3440;
|
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 */
|
||||||
}
|
}
|
@ -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);
|
injectTheme(random);
|
||||||
addThemeData();
|
addThemeData();
|
||||||
document.getElementById("switch-theme").addEventListener("click", ()=> {
|
document.getElementById("switch-theme").addEventListener("click", () => {
|
||||||
let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
|
fadeOutIn(350);
|
||||||
injectTheme(theme)
|
|
||||||
document.getElementById("switch-theme").innerText = theme
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@
|
|||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
<!-- Core theme CSS (includes Bootstrap)-->
|
||||||
<link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
|
<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/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>
|
</head>
|
||||||
|
|
||||||
<body id="page-top">
|
<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/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>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
|
||||||
<!-- Core theme JS-->
|
<!-- 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 src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function () {
|
$(function () {
|
||||||
|
Loading…
Reference in New Issue
Block a user