Create different bee animations for smaller and larger screens.

Author: Ariadne Engelbrecht

week_11__final-project/spelling_bee/static/css/index.css

@@ -137,16 +137,14 @@ main {
     display: none;
   }
 
-  #beeOne {
-    width: 2rem;
+ #beeOne {
     position: absolute;
-    top: 5%;
-    right: 85%;
+    top: 63%;
+    left: 72%;
     animation: jiggle 1s infinite;
   }
 }
 
-
 #comb {
   grid-area: comb;
 }
@@ -194,81 +192,15 @@ h6 {
   margin: 0;
 }
 
-
 /* Bee */
 
 #beeOne {
-  width: 5rem;
   position: absolute;
-  top: 5%;
-  right: 85%;
+  top: 10%;
+  right: 68%;
   animation: jiggle 1s infinite;
 }
 
-@keyframes fly-small-screens {
-  0% {
-    top: 30%;
-    right: -20%;
-  }
-
-  20% {
-    top: 20%;
-    right: 5%;
-  }
-
-  40% {
-    top: 15%;
-    right: 10%;
-  }
-
-  60% {
-    top: 30%;
-    right: 35%;
-  }
-
-  80% {
-    top: 60%;
-    right: 60%;
-  }
-
-  100% {
-    top: 5%;
-    right: 85%;
-  }
-}
-
-@keyframes fly-large-screens {
-  0% {
-    top: 30%;
-    right: -20%;
-  }
-
-  20% {
-    top: 20%;
-    right: 5%;
-  }
-
-  40% {
-    top: 15%;
-    right: 10%;
-  }
-
-  60% {
-    top: 30%;
-    right: 35%;
-  }
-
-  80% {
-    top: 60%;
-    right: 60%;
-  }
-
-  100% {
-    top: 5%;
-    right: 85%;
-  }
-}
-
 /* Comb */
 
 #comb {
@@ -444,8 +376,6 @@ dialog {
 
 /* Animations */
 
-
-
 @keyframes jiggle {
   0% {
     transform: rotate(0deg);
@@ -506,7 +436,6 @@ dialog {
   }
 }
 
-
 @keyframes fade-in-out {
   0% {
     opacity: 0;
@@ -518,3 +447,68 @@ dialog {
     opacity: 0;
   }
 }
+
+@keyframes fly-small-screens {
+  0% {
+    top: 30%;
+    left: -20%;
+  }
+
+  20% {
+    top: 20%;
+    left: 5%;
+  }
+
+  40% {
+    top: 30%;
+    left: 10%;
+  }
+
+  60% {
+    top: 60%;
+    left: 35%;
+  }
+
+  80% {
+    top: 70%;
+    left: 50%;
+  }
+
+  100% {
+    top: 10%;
+    left: 72%;
+  }
+}
+
+
+@keyframes fly-large-screens {
+  0% {
+    top: 30%;
+    right: -20%;
+  }
+
+  20% {
+    top: 20%;
+    right: 5%;
+  }
+
+  40% {
+    top: 30%;
+    right: 10%;
+  }
+
+  60% {
+    top: 50%;
+    right: 35%;
+  }
+
+  80% {
+    top: 60%;
+    right: 60%;
+  }
+
+  100% {
+    top: 10%;
+    right: 68%;
+  }
+}

week_11__final-project/spelling_bee/static/js/index.js

@@ -32,7 +32,7 @@ window.addEventListener('DOMContentLoaded', function () {
 
   showPangramPoints();
 
-  showBeeOnce();
+  animateBeeOncePerScreensize();
 
   function showInstructionsDialog() {
     const dialog = document.getElementById('dialog-instructions');
@@ -139,15 +139,22 @@ window.addEventListener('DOMContentLoaded', function () {
 
 
   // Show the bee animation only once per session:
-  function showBeeOnce() {
+  function animateBeeOncePerScreensize() {
     const bee = document.getElementById('beeOne');
+    const beeInnerWrapper = document.getElementById('beeOneInnerWrapper');
     if (!sessionStorage.getItem('beeShown')) {
       if (window.innerWidth <= 768) {
         // Add class for smaller screens and set animation duration
-        bee.style.animation = 'fly-small-screens 13s';
+        bee.style.animation = 'fly-small-screens 3s, jiggle 1s infinite';
+        bee.style.top = '10%';
+        bee.style.left = '72%';
+        beeInnerWrapper.setAttribute('transform', 'rotate(90 50 50)');
+
       } else {
         // Add class for larger screens and set animation duration
-        bee.style.animation = 'fly-large-screens 13s';
+        bee.style.animation = 'fly-large-screens 13s, jiggle 1s infinite';
+        bee.style.top = '10%';
+        bee.style.right = '68%';
       }
       sessionStorage.setItem('beeShown', 'true');
     }