From 579723466d91a5db1b119a90241f13fa9ab2f39e Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@protonmail.com>
Date: Fri, 3 Jun 2022 01:42:59 -0700
Subject: [PATCH] Added animations

---
 .DS_Store            | Bin 0 -> 6148 bytes
 css/general.css      |  29 +++++++++++++++++++++++++----
 img/.DS_Store        | Bin 0 -> 6148 bytes
 index.html           |   4 ++--
 js/scroll_element.js |  20 ++++++++++++++++++++
 5 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 img/.DS_Store
 create mode 100644 js/scroll_element.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..02a0be4a91bfa3e37b8c2701a9a72f8c600ce055
GIT binary patch
literal 6148
zcmeHKL2uJA6n<_4OE)2U0I>^FB(Brw7$6Xr(2WCEg5UtCBui<-QhRDr%2ZX#b?{?2
z@=y3LoZx%5hnAM9H-t7n$^M?7-{<IkO6-`3M0b+z5VeWOM`QHX(f!4Ep4*Z&Y=n7&
z*H8yZt`dxRIcH7*r@;TN0DrqpI-r7z=lR+1SNz1x_AhO^2#-FHB1vUEkDi{FmrRQz
zyB~Z{j`FN1JDne*(e$odUGvxc4gXy<RMV)8%Sq9V$8UJ_QmH&S_2cAK)}Qv;H};e)
z<4pF)nvkV^q`ZBd$y80dY9iA@b0ah1xBOPGeQP$`eY6$a-+3_K3TBV*b>QzloX=bS
z%{zCWyyzX~BdJbwVI;75X}f0e6u!XuQ}(B5EOR9Xh;jaP8c;?#jUmc04Jn3*hmdg_
zsAyCdsllwXVy<9c4Cz)Bxgcm0a*k+F7mmIy2)B+bNh$T|Go&6;2~J+;h}#RC27O$5
zyT2~vV0h`wzV`mcrK{W(>=bYctWtpYhX9Q+v{)I`TL(IQ1ps;oYlE+U{(%7pfT6|8
zAR;hfs6ay%_KG3w-9Z>S=0lrb88mbf`pH<wK3Uisim+D?5$JRhp+VO>1)KtP1)65q
z=JWsA`S<@i$&H)>PJs)hfbjOC{VqzfXX{dNeAWhN@6p&euQI49=<IQ<9X^UT(X?SM
YU<VjltPCOob3X!F2G=<S{;2}L0eI=x!T<mO

literal 0
HcmV?d00001

diff --git a/css/general.css b/css/general.css
index 7a0da90..5fb3824 100644
--- a/css/general.css
+++ b/css/general.css
@@ -334,6 +334,7 @@ nav li a:focus::after{
   }
   100% {
     transform: translateY(0px);
+    opacity: 1;
   }
 }
 @keyframes slidein-2 {
@@ -346,6 +347,26 @@ nav li a:focus::after{
   }
   100% {
     transform: translateY(0px);
+    opacity: 1;
+  }
+}
+@keyframes slidein-side {
+  0% {
+    transform: translateX(-100px);
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .slide-animation {
+    animation: slidein-side ease 1s;
   }
 }
 
@@ -861,7 +882,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 
 .prize-desc:hover > .prize-content {
   transform: rotate3d(0, 1, 0, 360deg);
-  transition: 0.5s;
+  transition: ease-in-out 0.5s;
 }
 
 .prize-laurel {
@@ -872,15 +893,15 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
 
 .prize-title {
   position: absolute;
-  color: rgb(77, 218, 211);
+  color: rgb(167, 146, 234);
   font-size: 25px;
-  margin-bottom: 45px;
+  margin-bottom: 60px;
 }
 
 .prize-content {
   color:rgb(129, 218, 126);
   font-size: 20px;
-  height: 20px;
+  height: 25px;
   position: absolute;
 }
 
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..908f667f67631777c84740cb9cd7ffc641d8a249
GIT binary patch
literal 6148
zcmeHKJxc>Y5Phpx1Z`4Uh-_&k_z#W{zd*1^VIhL~A_Pw(CPD1(pX-~QDU30&7KTJ-
zj@h@F-TBye+-?>?Xw3(wKodZNDp>5X`9Wk{bV+v1B7-5tIKc~^F}kWI{iWG%a0Z-#
zO=Cbm?jE{$#S~w@-(EH8vDoIvH=*qi7Z{_W#{}<)xTJR<kMxhYrfo!xxWhT^6`%Xe
zxG^*C4Kt6KWz4-sGUUcT%8cLPE+!ecll?*LIiC0onIX6C<IK9>So469BW8@=W&KmG
zMBeO>{aJRt-1mEH`Eu8h%fG~xdVj;wrhQl2P*2bz8~fW(tk>uaI0I{CK=y}76)X*F
z#k6&>Nml@3L30xJ<t`yU(XceE6*)o)>Pl4CU{{Qw?zBgnR~pue>W*NSk6@XD-B3cx
z&iFA+M<^A&bq1V)MFw{DXH(Aqv(@+iMJNB|3^)V-ih)qHJM9*iWM}Kr;^eH2)Ca1F
n%&QfX3mZF*Q%8>C18NeEMd=Vr!&;FRivJNvG<f3-td)UJ&}sS)

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 08f980f..46da85a 100644
--- a/index.html
+++ b/index.html
@@ -185,7 +185,7 @@
                         </div>
                     </div>
                 </article>
-                <article>
+                <article id="signup-article">
                     <h2 id="signup-header">Signup Instructions</h2>
                     <div id="steps-card">
                         <div id="signup-container">
@@ -471,6 +471,6 @@
     All Rights Reserved
 </footer>
 <script src="js/scroll_nav.js"></script>
-<script src="js/timeline.js"></script>
+<script src="js/scroll_element.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/scroll_element.js b/js/scroll_element.js
new file mode 100644
index 0000000..a1e8a0d
--- /dev/null
+++ b/js/scroll_element.js
@@ -0,0 +1,20 @@
+const observer = 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');
+      }
+    });
+  });
+  
+  observer.observe(document.querySelector('#event-main-box'));
+  observer.observe(document.querySelector('#timeline'));
+  observer.observe(document.querySelector('#signup-article'));
+  observer.observe(document.querySelector('#rules-description'));
+  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('#team-container'));
\ No newline at end of file