From dcc5632cd1238fd4213b5afd7c2dbbc884433c8a Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 15 Oct 2023 01:48:58 +0200 Subject: [PATCH] UI: Fancier load animations --- css/Background.css | 7 +++- css/Flags/Flags.css | 1 + css/Flags/Loaded.css | 16 +++++++++ css/PageManager.css | 78 ----------------------------------------- css/Pages/Home.css | 6 ++++ css/Pages/Pages.css | 79 ++++++++++++++++++++++++++++++++++++++++++ css/Pages/Settings.css | 6 ++-- index.html | 2 +- js/App.js | 2 +- js/UI/Home/Home.js | 4 +++ js/UI/Main/Main.js | 4 +++ 11 files changed, 121 insertions(+), 84 deletions(-) create mode 100644 css/Flags/Loaded.css diff --git a/css/Background.css b/css/Background.css index de3b592..9932b9d 100644 --- a/css/Background.css +++ b/css/Background.css @@ -30,4 +30,9 @@ body:not(.dark) #background:not(.scaled) img:last-child { body.dark #background.scaled img:first-child, body:not(.dark) #background.scaled img:last-child { transform: none; -} \ No newline at end of file +} + +#background .notloaded { + transform: scale(1) !important; + opacity: 0 !important; +} diff --git a/css/Flags/Flags.css b/css/Flags/Flags.css index 548258f..b85c544 100644 --- a/css/Flags/Flags.css +++ b/css/Flags/Flags.css @@ -1,3 +1,4 @@ +@import url(Loaded.css); @import url(Dark.css); body { diff --git a/css/Flags/Loaded.css b/css/Flags/Loaded.css new file mode 100644 index 0000000..e131855 --- /dev/null +++ b/css/Flags/Loaded.css @@ -0,0 +1,16 @@ +body { + transition: opacity .3s; +} + +body:not(.loaded) { + opacity: 0; + transition: none; +} + +body:not(.loaded) * { + transition: none !important; +} + +body:not(.loaded) .page .wrapper { + transform: scale(.8) translateY(50%); +} diff --git a/css/PageManager.css b/css/PageManager.css index 83b373d..e69de29 100644 --- a/css/PageManager.css +++ b/css/PageManager.css @@ -1,78 +0,0 @@ -.page { - position: fixed; - top: 0; - left: 50%; - width: 100%; - max-width: 920px; - height: 100vh; - transform: translateX(-50%); - overflow-y: scroll; - transition: top .4s, opacity .4s, visibility .4s, color .3s; -} - -.page:not(.current) { - top: 240px; - visibility: hidden; - opacity: 0; -} - -.wrapper { - box-shadow: 2px 2px 8px #0003; - background: var(--background); - padding: 3px; - backdrop-filter: var(--blur); - border-radius: 24px; - margin: -4px 12px 16px; - text-align: center; - overflow: hidden; - min-width: 340px; - transition: background .2s; -} - -.back { - box-shadow: 2px 2px 8px #0002; - position: relative; - width: 64px; - height: 64px; - border-radius: 24px; - background: var(--background); - margin: 20px; - backdrop-filter: var(--blur); - transition: background .2s; -} - -.back i { - margin: 4px; - width: 56px; - height: 56px; - cursor: pointer; - border-radius: 20px; - transition: background .2s; -} - -.back i:hover { - background: var(--hover); -} - -.back i:after { - content: "chevron_left"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.header { - display: flex; - align-items: center; - margin: 20px 20px 16px; -} - -.header i { - margin-top: 1px; - margin-right: 10px; -} - -.header .text { - font-size: 26px; -} diff --git a/css/Pages/Home.css b/css/Pages/Home.css index 1086be4..85615a7 100644 --- a/css/Pages/Home.css +++ b/css/Pages/Home.css @@ -10,6 +10,12 @@ width: 192px; height: 192px; object-fit: cover; + transition: transform .4s, opacity .4s; +} + +.appicon.notloaded { + transform: scale(.8); + opacity: 0; } #theme-switcher i::after { diff --git a/css/Pages/Pages.css b/css/Pages/Pages.css index 11f8e83..02e7e0d 100644 --- a/css/Pages/Pages.css +++ b/css/Pages/Pages.css @@ -1,3 +1,82 @@ @import url(Home.css); @import url(Services.css); @import url(Settings.css); + +.page { + position: fixed; + top: 0; + left: 50%; + width: 100%; + max-width: 920px; + height: 100vh; + transform: translateX(-50%); + overflow-y: scroll; + transition: top .4s, opacity .4s, visibility .4s, color .3s; +} + +.page:not(.current) { + top: 240px; + visibility: hidden; + opacity: 0; +} + +.wrapper { + box-shadow: 2px 2px 8px #0003; + background: var(--background); + padding: 3px; + backdrop-filter: var(--blur); + border-radius: 24px; + margin: -4px 12px 16px; + text-align: center; + overflow: hidden; + min-width: 340px; + transition: background .2s, transform .4s, backdrop-filter .6s; +} + +.back { + box-shadow: 2px 2px 8px #0002; + position: relative; + width: 64px; + height: 64px; + border-radius: 24px; + background: var(--background); + margin: 20px; + backdrop-filter: var(--blur); + transition: background .2s; +} + +.back i { + margin: 4px; + width: 56px; + height: 56px; + cursor: pointer; + border-radius: 20px; + transition: background .2s; +} + +.back i:hover { + background: var(--hover); +} + +.back i:after { + content: "chevron_left"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.header { + display: flex; + align-items: center; + margin: 20px 20px 16px; +} + +.header i { + margin-top: 1px; + margin-right: 10px; +} + +.header .text { + font-size: 26px; +} diff --git a/css/Pages/Settings.css b/css/Pages/Settings.css index 52521e7..3448cc8 100644 --- a/css/Pages/Settings.css +++ b/css/Pages/Settings.css @@ -12,7 +12,7 @@ border-radius: 16px; align-items: center; text-align: left; - transition: background .4s; + transition: background .3s; } .setting i { @@ -37,7 +37,7 @@ background: #8886; border-radius: 100px; margin: 0 4px 0 auto; - transition: border .4s, background .4s; + transition: border .4s, background .3s; } .setting .switch:after { @@ -50,7 +50,7 @@ top: 50%; border-radius: 10px; transform: translateY(-50%); - transition: left .2s, background .4s; + transition: left .2s, background .3s; } .setting.checked .switch { diff --git a/index.html b/index.html index 69f20bc..41cefe7 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
diff --git a/js/App.js b/js/App.js index b3b7ba2..fd135ce 100644 --- a/js/App.js +++ b/js/App.js @@ -12,7 +12,6 @@ export default class App { constructor(config) { if (App.instance) return App.instance App.instance = this - document.body.classList.remove("init") this.config = new Config(config) this.init() } @@ -24,5 +23,6 @@ export default class App { this.settings = new Settings() showPage("home") + document.body.classList.add("loaded") } } diff --git a/js/UI/Home/Home.js b/js/UI/Home/Home.js index da385c4..d2c4704 100644 --- a/js/UI/Home/Home.js +++ b/js/UI/Home/Home.js @@ -35,6 +35,10 @@ export default class Home { initHomeUI() { let logo = document.getElementById("app-icon") logo.src = this.config.get("icon") + logo.classList.add("notloaded") + logo.addEventListener("load", () => { + logo.classList.remove("notloaded") + }) let name = document.getElementById("app-name") name.innerText = this.config.get("name") diff --git a/js/UI/Main/Main.js b/js/UI/Main/Main.js index 208da28..3d1ccef 100644 --- a/js/UI/Main/Main.js +++ b/js/UI/Main/Main.js @@ -17,6 +17,10 @@ export default class Main { this.backgrounds = document.getElementById("background") for (let i = 0; i < 2; i++) { let img = document.createElement("img") + img.classList.add("notloaded") + img.addEventListener("load", () => { + img.classList.remove("notloaded") + }) this.backgrounds.appendChild(img) }