MOAR

invite/index.html

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

invite/style.scss

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