AnthonyDuan/taiko-web
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SongBg: Add don backgrounds

Browse Source
This commit is contained in:
LoveEevee
2018-12-02 18:25:42 +03:00
parent c00fc0c615
commit f25aee9643
7 changed files with 195 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/src/css/game.css
View File

@@ -6,6 +6,10 @@
background-size: calc(100vh / 720 * 512);
background-position: center;
}
#screen.view{
background-image: none;
background-color: #000;
}
#canvas{
position: relative;
z-index: 1;

2
public/src/css/loader.css
View File

@@ -41,6 +41,7 @@
background: #aef;
font-family: sans-serif;
font-size: 20px;
cursor: default;
z-index: 10;
}
#unsupportedBrowser::before{
@@ -76,6 +77,7 @@
margin: 10px 50px 0 50px;
border: 3px solid #39a;
padding: 5px;
cursor: auto;
user-select: text;
}
#unsupportedHide{

83
public/src/css/songbg.css
View File

@@ -1,16 +1,16 @@
#songbg,
#songbg>*,
.donbg,
.donbg *,
#song-stage{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: calc(100vh / 9 * 32);
}
#songbg{
max-width: calc(100vh / 9 * 32);
height: 50.1%;
background-color: #000;
}
#songbg>*{
top: 0;
@@ -19,11 +19,14 @@
#songbg>*{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
bottom: 0;
}
#song-stage{
height: calc(44 / 720 * 100vh);
background-position: center bottom;
background-repeat-y: no-repeat;
bottom: 0;
}
.portrait #songbg{
height: 63.4%;
@@ -81,3 +84,77 @@
background-image: none;
animation: none;
}
.donbg{
top: 0;
height: calc(50% - 13.7vw);
min-height: 25.6%;
}
.portrait .donbg{
height: calc(50% - 48.9vw);
min-height: 22.5%;
}
.donbg *{
top: 0;
bottom: 0;
background-repeat-y: no-repeat;
}
.donbg.donbg-bottom{
top: auto;
bottom: 0;
}
.portrait .donbg.donbg-bottom {
top: calc(50% + -1vw);
bottom: auto;
}
@keyframes donbg-scroll{
from{background-position-x: 0}
to{background-position-x: calc(var(--h) / var(--sh1) * var(--sw) * -1)}
}
@keyframes donbg-raise{
from{background-position-y: 0}
to{background-position-y: var(--raised)}
}
@keyframes donbg-anim3{
0%{background-position-y: 0}
13%{background-position-y: var(--raised)}
15%{background-position-y: var(--raised)}
45%{background-position-y: 0}
50%{background-position-y: 0}
65%{background-position-y: calc(var(--raised) / 2)}
80%{background-position-y: 0}
}
@keyframes donbg-anim5{
0%{background-position-y: 0}
13%{background-position-y: var(--raised)}
17%{background-position-y: var(--raised)}
30%{background-position-y: 0}
}
.donlayer1{
animation: 5s linear donbg-scroll infinite;
background-size: auto 100%;
}
.donlayer2{
background-size: auto calc(var(--sh2) / var(--sh1) * 100%);
--raised: calc((var(--sh2) - var(--sh1)) / var(--sh2) * var(--h) * -1);
}
.donbg-1 .donlayer2,
.donbg-2 .donlayer2,
.donbg-4 .donlayer2,
.donbg-6 .donlayer2,
.donbg-raise .donlayer2{
animation: 5s linear donbg-scroll infinite, 1s linear donbg-raise infinite alternate;
}
.donbg-3 .donlayer2,
.donbg-anim3 .donlayer2{
animation: 3.4s linear donbg-scroll infinite, 1.8s linear donbg-anim3 infinite;
}
.donbg-5 .donlayer2,
.donbg-anim5 .donlayer2{
animation: 2.7s linear donbg-scroll infinite, 2.2s linear donbg-anim5 infinite;
}
.donbg-fastscroll .donlayer1{
animation: 2s linear donbg-scroll infinite;
}
.donbg-fastscroll .donlayer2{
animation: 1s linear donbg-scroll infinite;
}