even better animation

jitsedesmet · Jun 18, 2024 · 7542cb2 · 7542cb2
1 parent 4522b13
commit 7542cb2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/presentation/final-assets/custom.css b/presentation/final-assets/custom.css
@@ -22,28 +22,57 @@
     position: fixed;
     height: 30px;
     width: 30px;
-    background: #bfbfbf;
-    transform: translate(40px, 20px);
-    box-shadow: 3px 3px 3px black;
+    transform: translate(42px, 20px);
+    /*box-shadow: 3px 3px 3px black;*/
 /*path('M20,20 C20,100 200,0 200,100')*/
 /*    https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
 /*    L500,-10, 640,-10 */
 /*    offset-path: path('M20,20 H400 Q450 -40, 500 -10');*/
 /*     https://yqnn.github.io/svg-path-editor/ */
-    z-index: 99;
-    offset-path: path('M -65 68 H 500 Q 625 68 625 10');
+/*    z-index: 99;*/
+    offset-path: path('M -65 68 H 500 Q 615 68 615 -33');
     offset-rotate: 0deg;
 }
 
+.boxy {
+    box-shadow: 3px 3px 3px black;
+    background: rgba(191, 191, 191, 0.8);
+    height: 100%;
+    width: 100%;
+    transform: translate(0, -74px)
+}
+
 .animated-message.visible {
     animation: move 5000ms infinite forwards ease-in-out;
 }
 
+.animated-message.visible .boxy {
+    animation: mover 5000ms infinite forwards step-end;
+}
+
+@keyframes mover {
+    45% {
+        background: none;
+        box-shadow: none;
+    }
+    100% {
+        background: none;
+        box-shadow: none;
+    }
+}
+
 @keyframes move {
     0% {
         offset-distance: 0;
     }
+    45% {
+        offset-distance: 45%;
+        background: none;
+        box-shadow: none;
+    }
     100% {
+        background: none;
+        box-shadow: none;
         offset-distance: 100%;
     }
 }
diff --git a/presentation/final-assets/taart.png b/presentation/final-assets/taart.png
diff --git a/presentation/final-presentation.html b/presentation/final-presentation.html
@@ -192,7 +192,10 @@ <h3>Research Question and Hypothesis</h3>
 
 
         <div style="height: 150px; width: 200px">
-            <div class="animated-message fragment fade-in-then-out" data-fragment-index="1"></div>
+            <div class="animated-message fragment fade-in-then-out" style="z-index: 100; opacity: 0.99" data-fragment-index="1">
+                <img src="final-assets/taart.png" style="transform: translate(-0.5px, -15px); z-index: -1">
+                <div class="boxy"></div>
+            </div>
             <div style="height: 100%; width: 100%; background: black; clip-path: polygon(0% 40%, 60% 40%, 60% 30%, 100% 50%, 60% 70%, 60% 60%, 0% 60%);">
             </div>
         </div>