Jonttu/HeliosLauncher
1
0
Fork 1
mirror of https://github.com/dscalzi/HeliosLauncher.git synced 2024-12-22 11:42:14 -08:00
Code Issues Projects Releases Wiki Activity

Experimenting with the menu slide animation.

Browse Source
This commit is contained in:
Daniel Scalzi 2018-04-26 03:49:45 -04:00
parent 6e55442b25
commit 22f5eabe49
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
3 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/app.ejs
View File

@ -13,6 +13,9 @@
#main {
height: calc(100% - 22px);
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
width: 100%;
position: absolute;
z-index: 10;
}
#main[overlay] {
filter: blur(3px) contrast(0.9) brightness(1.0);

17
app/assets/css/launcher.css
View File

@ -51,6 +51,8 @@ p {
/* Frame Bar */
#frameBar {
position: relative;
z-index: 100;
display: flex;
flex-direction: column;
background: rgba(1, 2, 1, 0.5);
@ -890,10 +892,14 @@ p {
/* Main content container. */
#landingContainer {
height: 100%;
position: relative;
}
/* Upper content container. */
#landingContainer > #upper {
position: relative;
transition: 2s ease;
top: 0px;
height: 77%;
display: flex;
}
@ -921,6 +927,9 @@ p {
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
#landingContainer > #lower > #left {
position: relative;
transition: 2s ease;
top: 0px;
height: 100%;
width: 33%;
display: inline-flex;
@ -934,16 +943,23 @@ p {
left: 50px;
}
#landingContainer > #lower > #center {
position: relative;
transition: 2s ease;
top: 0px;
height: 100%;
width: 34%;
display: inline-flex;
justify-content: center;
}
#landingContainer > #lower > #center #content {
transition: 2s ease;
position: relative;
top: 10px;
}
#landingContainer > #lower > #right {
position: relative;
transition: 2s ease;
top: 0px;
height: 100%;
width: 33%;
display: inline-flex;
@ -1267,6 +1283,7 @@ p {
justify-content: center;
}
/* Button which opens the server selection view. */
#server_selection_button {
background: none;
border: none;

23
app/assets/js/scripts/landing.js
View File

@ -101,6 +101,29 @@ server_selection_button.addEventListener('click', (e) => {
toggleOverlay(true, 'serverSelectContent')
})
// Test menu transform.
function slide_(up){
const lCUpper = document.querySelector('#landingContainer > #upper')
const lCLLeft = document.querySelector('#landingContainer > #lower > #left')
const lCLCenter = document.querySelector('#landingContainer > #lower > #center')
const lCLRight = document.querySelector('#landingContainer > #lower > #right')
const menuBtn = document.querySelector('#landingContainer > #lower > #center #content')
if(up){
lCUpper.style.top = '-200vh'
lCLLeft.style.top = '-200vh'
lCLCenter.style.top = '-200vh'
lCLRight.style.top = '-200vh'
menuBtn.style.top = '130vh'
} else {
lCUpper.style.top = '0px'
lCLLeft.style.top = '0px'
lCLCenter.style.top = '0px'
lCLRight.style.top = '0px'
menuBtn.style.top = '10px'
}
}
// Update Mojang Status Color
const refreshMojangStatuses = async function(){
console.log('Refreshing Mojang Statuses..')