arti/22
1
0
Fork 0
Code Pull Requests Releases Activity

MOAR

Browse Source
This commit is contained in:
Arti Zirk 2017-07-21 10:56:11 +03:00
parent e13c5153c9
commit 12186a0d08
2 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invite/index.html
View File

@ -24,6 +24,10 @@
<div class="slide"> <div class="slide">
<h1>Lapikute kontoris</h1> <h1>Lapikute kontoris</h1>
<h2>Akadeemia tee 5</h2> <h2>Akadeemia tee 5</h2>
</div>
<div class="slide">
<h1>Näeme 18. august</h1>
<small>:wq!</small> <small>:wq!</small>
</div> </div>
</div> </div>

46
invite/style.scss
View File

@ -3,7 +3,7 @@ $background: #000000;
$animation-length: 4s; $animation-length: 4s;
$animation-delay: $animation-length - 1.5; $animation-delay: $animation-length - 1.5;
$slide-count: 5; $slide-count: 6;
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -18,14 +18,18 @@ body {
margin:0; margin:0;
padding:0; padding:0;
overflow:hidden; overflow:hidden;
animation: colorchange 10s alternate infinite; animation: colorchange 30s linear alternate infinite;
}
h1 {
margin:0;
} }
.container { .container {
height:100vh; height:100vh;
width: 100vw; width: 100vw;
@for $child from 0 to $slide-count - 1 { @for $child from 0 to $slide-count - 2 {
>:nth-child(#{$child+1}) { >:nth-child(#{$child+1}) {
animation-delay: $animation-delay*$child; animation-delay: $animation-delay*$child;
animation-duration: $animation-length; animation-duration: $animation-length;
@ -34,11 +38,22 @@ body {
} }
} }
>:nth-child(#{$slide-count - 1}) {
animation-delay: $animation-delay* ($slide-count - 2);
animation-duration: $animation-length;
animation-name: slide-in-and-move-up;
animation-fill-mode: both;
}
>:nth-child(#{$slide-count}) { >:nth-child(#{$slide-count}) {
animation-delay: $animation-delay* ($slide-count - 1); animation-delay: $animation-delay* ($slide-count - 1);
animation-duration: $animation-length; animation-duration: $animation-length;
animation-name: slide-in; animation-name: slide-in;
animation-fill-mode: both; animation-fill-mode: both;
h1 {
margin: 120px;
}
} }
} }
@ -68,19 +83,36 @@ body {
} }
} }
@keyframes slide-in { @keyframes slide-in-and-move-up {
0% { 0% {
transform: translateY(50px); transform: translateY(50px);
opacity: 0; opacity: 0;
} }
30%, 100% { 30%, 60% {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
100% {
transform: translateY(50px);
opacity: 1;
}
}
@keyframes slide-in {
0% {
transform: translateY(100px);
opacity: 0;
}
30%, 100% {
transform: translateY(-30px);
opacity: 1;
}
} }
@keyframes colorchange { @keyframes colorchange {
0% {background: #002b4a;} 0% {background: #01004b;}
50% {background: #01004b;} 33% {background: #002b4a;}
66% {background: #01004b;}
100% {background: #30004b;} 100% {background: #30004b;}
} }