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

IT WORKS BETTER

Browse Source
This commit is contained in:
Arti Zirk 2017-07-21 00:13:21 +03:00
parent a2853cad2b
commit 74e22b1dba
3 changed files with 48 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
invite/index.html
View File

@ -5,15 +5,26 @@
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<div class="container"> <div class="container">
<div class="slide"> <div class="slide">
<h1>0</h1> <h1>18. august</h1>
</div> </div>
<div class="slide"> <div class="slide">
<h1>1</h1> <h1>Oled oodatud</h1>
</div> </div>
<div class="slide"> <div class="slide">
<h1>2</h1> <h1>Minu</h1>
<img src="me.jpg">
</div>
<div class="slide">
<h1>Sünnipäevale</h1>
</div>
<div class="slide">
<h1>Näeme Lapikude kontoris</h1>
<h2>Akadeemia tee 5</h2>
<small>:wq!</small>
</div> </div>
</div> </div>
</html> </html>

BIN
invite/me.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

41
invite/style.scss
View File

@ -1,8 +1,9 @@
$foreground: #FFFFFF; $foreground: #FFFFFF;
$background: #000000; $background: #000000;
$animation-length: 3s; $animation-length: 4s;
$animation-delay: $animation-length - 0.3; $animation-delay: $animation-length - 1.5;
$slide-count: 5;
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -17,20 +18,28 @@ body {
margin:0; margin:0;
padding:0; padding:0;
overflow:hidden; overflow:hidden;
animation: colorchange 10s alternate infinite;
} }
.container { .container {
height:100vh; height:100vh;
width: 100vw; width: 100vw;
@for $child from 0 to 3 { @for $child from 0 to $slide-count - 1 {
>: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;
animation-name: slide-in; animation-name: slide-in-out;
animation-fill-mode: both; animation-fill-mode: both;
} }
} }
>:nth-child(#{$slide-count}) {
animation-delay: $animation-delay* ($slide-count - 1);
animation-duration: $animation-length;
animation-name: slide-in;
animation-fill-mode: both;
}
} }
.slide { .slide {
@ -40,14 +49,15 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
} }
@keyframes slide-in { @keyframes slide-in-out {
0% { 0% {
transform: translateY(-50px); transform: translateY(50px);
opacity: 0; opacity: 0;
} }
10%, 90% { 30%, 60% {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
@ -57,3 +67,20 @@ body {
opacity: 0; opacity: 0;
} }
} }
@keyframes slide-in {
0% {
transform: translateY(50px);
opacity: 0;
}
30%, 100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes colorchange {
0% {background: #002b4a;}
50% {background: #01004b;}
100% {background: #30004b;}
}