Added animations

css/general.css

@@ -363,12 +363,66 @@ nav li a:focus::after{
     opacity: 1;
   }
 }
+@keyframes slidein-prize-2 {
+  0% {
+    transform: translateX(-150px);
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+@keyframes slidein-prize-1 {
+  0% {
+    transform: translateY(-100px);
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+@keyframes slidein-prize-3 {
+  0% {
+    transform: translateX(300px);
+    opacity: 0;
+  }
+  60% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
 
 @media (prefers-reduced-motion: no-preference) {
   .slide-animation {
     animation: slidein-side ease 1s;
   }
 }
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation-prize-2 {
+    animation: slidein-prize-2 ease 3s;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation-prize-1 {
+    animation: slidein-prize-1 ease 2s;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation-prize-3 {
+    animation: slidein-prize-3 ease 3s;
+  }
+}
 
 /* Main Section */
 main {

index.html

@@ -193,6 +193,7 @@
                             <div class="outer">
                               <div class="card">
                                 <div class="info">
+                                    <!-- Checklist src: https://codepen.io/milanraring/pen/QWbqBGo -->
                                     <div id="checklist">
                                         <input id="01" type="checkbox" name="r" value="1">
                                         <label for="01">
@@ -371,7 +372,7 @@
             <div id="prizes-container">
                 <article id="second-column">
                     <div class="podium-description">
-                        <div class="prize-desc">
+                        <div class="prize-desc" id="second-place">
                             <img class="prize-laurel" src="img/silver-laurel.png" loading="lazy" alt="silver laurel">
                             <div class="prize-title">2nd</div>
                             <div class="prize-content">$300</div>
@@ -382,7 +383,7 @@
                 </article>
                 <article id="first-column">
                     <div class="podium-description">
-                        <div class="prize-desc">
+                        <div class="prize-desc" id="first-place">
                             <img class="prize-laurel" src="img/gold-laurel.png" loading="lazy" alt="gold laurel">
                             <div class="prize-title">1st</div>
                             <div class="prize-content">$400</div>
@@ -397,7 +398,7 @@
                 </article>
                 <article id="third-column">
                     <div class="podium-description">
-                        <div class="prize-desc">
+                        <div class="prize-desc" id="third-place">
                             <img class="prize-laurel" src="img/bronze-laurel.png" loading="lazy" alt="bronze laurel">
                             <div class="prize-title">3rd</div>
                             <div class="prize-content">$200</div>
@@ -412,7 +413,7 @@
             <h2 class="topic">Hackathon Team</h2>
             <hr class="line">
             <div id="team-container">
-                <article>
+                <article id="administration">
                     <h3 class="team-title">Administration</h3>
                     <div class="team-entry">
                         <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@@ -423,7 +424,7 @@
                         </div>
                     </div>
                 </article>
-                <article>
+                <article id="logistics">
                     <h3 class="team-title">Logistics</h3>
                     <div class="team-entry">
                         <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@@ -434,7 +435,7 @@
                         </div>
                     </div>
                 </article>
-                <article>
+                <article id="outreach">
                     <h3 class="team-title">Outreach</h3>
                     <div class="team-entry">
                         <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@@ -445,7 +446,7 @@
                         </div>
                     </div>
                 </article>
-                <article>
+                <article id="tech">
                     <h3 class="team-title">Tech</h3>
                     <div class="team-entry">
                         <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
@@ -472,7 +473,7 @@
                         </div>
                     </div>
                 </article>
-                <article>
+                <article id="marketing">
                     <h3 class="team-title">Marketing</h3>
                     <div class="team-entry">
                         <div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>

js/scroll_element.js

@@ -9,6 +9,39 @@ const observer = new IntersectionObserver(entries => {
     });
   });
 
+  const observer_prize_2 = new IntersectionObserver(entries => {
+    // Loop over the entries
+    entries.forEach(entry => {
+      // If the element is visible
+      if (entry.isIntersecting) {
+        // Add the animation class
+        entry.target.classList.add('slide-animation-prize-2');
+      }
+    });
+  });
+
+  const observer_prize_1 = new IntersectionObserver(entries => {
+    // Loop over the entries
+    entries.forEach(entry => {
+      // If the element is visible
+      if (entry.isIntersecting) {
+        // Add the animation class
+        entry.target.classList.add('slide-animation-prize-1');
+      }
+    });
+  });
+  
+  const observer_prize_3 = new IntersectionObserver(entries => {
+    // Loop over the entries
+    entries.forEach(entry => {
+      // If the element is visible
+      if (entry.isIntersecting) {
+        // Add the animation class
+        entry.target.classList.add('slide-animation-prize-3');
+      }
+    });
+  });
+
   observer.observe(document.querySelector('#description-heading'));
   observer.observe(document.querySelector('#event-main-box'));
   observer.observe(document.querySelector('#timeline'));
@@ -17,5 +50,14 @@ const observer = new IntersectionObserver(entries => {
   observer.observe(document.querySelector('#guidelines'));
   observer.observe(document.querySelector('#code-of-conduct'));
   observer.observe(document.querySelector('#photo-release-container'));
-  observer.observe(document.querySelector('#prizes-container'));
+  observer.observe(document.querySelector('#second-column'));
-  observer.observe(document.querySelector('#team-container'));
+  observer.observe(document.querySelector('#first-column'));
+  observer.observe(document.querySelector('#third-column'));
+  observer_prize_2.observe(document.querySelector('#second-place'));
+  observer_prize_1.observe(document.querySelector('#first-place'));
+  observer_prize_3.observe(document.querySelector('#third-place'));
+  observer.observe(document.querySelector('#administration'));
+  observer.observe(document.querySelector('#logistics'));
+  observer.observe(document.querySelector('#outreach'));
+  observer.observe(document.querySelector('#tech'));
+  observer.observe(document.querySelector('#marketing'));