fixed animated docs emojis

DivinciAI · Mar 22, 2024 · 6cee7cb · 6cee7cb
1 parent 36118d9
commit 6cee7cb
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -270,44 +270,48 @@ <h2>We're training a family of Medical Language Models</h2>
   // Change the emoji every 3 seconds
   // setInterval(changeDoctorEmoji, 4000);
 
-async function emojiTransitions(emojiElement, transitionTime, displayTime){
+  async function emojiTransitions(emojiElement, transitionTime, displayTime){
 
-  const femaleEmojis = ["👩🏻‍⚕️", "👩🏼‍⚕️", "👩🏽‍⚕️", "👩🏾‍⚕️", "👩🏿‍⚕️"];
-  const maleEmojis = ["👨🏻‍⚕️", "👨🏼‍⚕️", "👨🏽‍⚕️", "👨🏾‍⚕️", "👨🏿‍⚕️"];
-  const originalEmojis = [...femaleEmojis, ...maleEmojis];
-  var activeEmojis = [];
+    const emojis = [
+      "👩🏻‍⚕️", "👩🏼‍⚕️", "👩🏽‍⚕️", "👩🏾‍⚕️", "👩🏿‍⚕️",
+      "👨🏻‍⚕️", "👨🏼‍⚕️", "👨🏽‍⚕️", "👨🏾‍⚕️", "👨🏿‍⚕️"
+    ];
+    let currentEmojiIndex = 0;
 
-  while(true){
-    if(activeEmojis.length === 0){
-      activeEmojis = [...originalEmojis];
-    }
-
+    while(true){
+      // Set the emoji
+      emojiElement.textContent = emojis[currentEmojiIndex];
 
-    emojiElement.classList.add("emoji-fade-out-class");
-    await delay(transitionTime);
-    emojiElement.classList.remove("emoji-fade-out-class");
+      // Fade in the emoji
+      emojiElement.classList.add("emoji-fade-in-class");
+      await delay(transitionTime);
+      emojiElement.classList.remove("emoji-fade-in-class");
 
-    const nextEmojiIndex = Math.floor(Math.random() * activeEmojis.length);
-    const nextEmoji = activeEmojis.splice(nextEmojiIndex, 1)[0];
-    emojiElement.textContent = nextEmoji;
+      // Wait for the display time
+      await delay(displayTime);
 
-    emojiElement.classList.add("emoji-fade-in-class");
-    await delay(transitionTime);
-    emojiElement.classList.remove("emoji-fade-in-class");
+      // Fade out the emoji
+      emojiElement.classList.add("emoji-fade-out-class");
+      await delay(transitionTime);
+      emojiElement.classList.remove("emoji-fade-out-class");
 
-    await delay(displayTime);
-  }
-  function delay(time){
-    return new Promise((res)=>{
-      setTimeout(res, time);
-    });
-  }
+      // Move to the next emoji, go back to the start if at the end
+      currentEmojiIndex = (currentEmojiIndex + 1) % emojis.length;
+    }
+
+    function delay(time){
+      return new Promise((res) => {
+        setTimeout(res, time);
+      });
+    }
 }
 
   emojiTransitions(
     document.querySelector('#doctorEmoji'), 
-    4000,
+    1000, // Time for fade transition
+    2000  // Time to display each emoji
   );
+
 
   // Listen for scroll events
   window.addEventListener('scroll', runOnScroll);

diff --git a/styles.css b/styles.css
@@ -35,7 +35,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 90vh;
+    height: 70vh;
     flex-direction: column;
     margin-bottom: 500px;
 
@@ -46,6 +46,7 @@ body {
     h4 {
       margin-top: -25px !important;
       font-size: 25px;
+      text-align: center;
     }
 
     .doc-emoji-bg {
@@ -77,11 +78,23 @@ body {
       display: flex; 
       justify-content: center; 
       align-items: center;
-      animation: fadeOutIn 4s infinite;
+      /* animation: fadeOutIn 4s infinite; */
       position: absolute;
     }
   }
 
+  @keyframes emoji-fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  .emoji-fade-in-class { animation: emoji-fadeIn 2s; }
+
+  @keyframes emoji-fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+  .emoji-fade-out-class { animation: emoji-fadeOut 2s; }
+
   /* Define the rotation keyframes */
   @keyframes rotate-around-circle {
     from {
@@ -255,6 +268,11 @@ body {
     font-size: 35px;
     color: black; /* Make this text color black to stand out on white background */
     margin-top: -133px;
+    z-index: -2;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
   }
   .nav-header {
     background-color: #333; /* Dark background for the header */
@@ -652,6 +670,15 @@ body {
   }
 }
 @media (max-width: 768px) {
+
+  .doctor-emoji-container {
+    h1 {
+      font-size: 60px;
+    }
+    h4 {
+      font-size: 22px;
+      width: 82%;
+    }
   .nav-header {
     height: auto;
   }