Cadoles/pitaya-launcher
21
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tentative mise en place crossfade sur le background

Browse Source
This commit is contained in:
wpetit
2015-10-20 13:15:27 +02:00
parent c1fe1884e2
commit 33c2f5fccd
6 changed files with 542 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
css/style.css
View File

@ -13,9 +13,6 @@ html, body {
padding: 0;
margin: 0;
font-family: 'sawasdeeregular';
background-size: contain;
background-position: center;
background-color: rgb(34, 107, 160);
width: 100%;
height: 100%;
color: white;
@ -46,11 +43,6 @@ html, body {
.launcher {
display: flex;
flex-direction: column;
background: url('../img/background.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: background-image 250ms ease-in-out;
position: absolute;
left: 0;
right: 0;
@ -58,6 +50,27 @@ html, body {
top: 0;
}
.launcher > .crossfade-image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
.launcher .crossfade-image > .top,
.launcher .crossfade-image > .bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.launcher .main {
flex-direction: row;
display: flex;
@ -319,6 +332,13 @@ html, body {
100% { transform: scale(1); }
}
@-webkit-keyframes fade-out {
0% { opacity: 1; }
1% { opacity: 0.99; }
99% { opacity: 0.01; }
100% { opacity: 0; }
}
@-webkit-keyframes slide-in-left {
0% { transform: translateX(-100%); }
100% { transform: translateX(0%); }