feat:home animation

src/containers/App/App.css

@@ -1099,6 +1099,40 @@ span.formula_line::-webkit-scrollbar-track {
   position:relative;
   min-height: 90vw;
 }
+.img-fade-in {
+  /* position: relative; */
+  opacity: 0;
+  transform: translateX(0vw); 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-fade-in-active {
+  transform: translateX(0); 
+  opacity: 1; 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+.img-left-in {
+  /* position: relative; */
+  opacity: 0;
+  transform: translateX(-20vw); 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-left-in-active {
+  transform: translateX(0); 
+  opacity: 1; 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+
+ .img-right-in {
+  /* position: relative; */
+  opacity: 0;
+  transform: translateX(20vw); 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-right-in-active {
+  transform: translateX(0); 
+  opacity: 1; 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
 
 .page-element-0 {
   position: absolute;
@@ -1543,62 +1577,382 @@ span.formula_line::-webkit-scrollbar-track {
  }
  .page-element-18p2 {
   position: absolute;
-  left: 45vw;
-  top: 60vw;
+  left: 50vw;
+  top: 20vw;
   height: auto;
   width: 40vw;
   z-index: 2;
  }
+ .element-18p3-container {
+  position: absolute;
+  left: 0vw;
+  top: 10vw;
+  height: 25vw;
+  width: 100vw;
+ }
  .page-element-18p3 {
   position: absolute;
   left: 30vw;
-  top: 10vw;
+  top: 0vw;
   height: auto;
   width: 60vw;
  }
  .page-element-18p4 {
   position: absolute;
   left: 5vw;
-  top: 46vw;
+  top: 0vw;
   height: auto;
   width: 50vw;
  }
+ .page-element-18p4-container {
+  position: absolute;
+  left: 0vw;
+  top: 46vw;
+  height: 20vw;
+  width: 100vw;
+ }
  .page-element-18p5 {
   position: absolute;
   left: 2vw;
-  top: 80vw;
+  top: 0vw;
   height: auto;
   width: 95vw;
  }
  .page-element-18p6 {
   position: absolute;
   left: 2vw;
-  top: 79vw;
+  top: 0vw;
   height: auto;
   width: 62vw;
   z-index: 3;
  }
+ .page-element-18p6-container {
+  position: absolute;
+  left: 0vw;
+  top: 79vw;
+  height: 40vw;
+  width: 100vw;
+  z-index: 3;
+ }
+ .page-element-18p6p {
+  position: absolute;
+  left: 24vw;
+  top: 9vw;
+  height: auto;
+  width: 11vw;
+  z-index: 4;
+ }
+ .img-18p6p {
+  opacity: 0;
+ }
+ .img-18p6p-active {
+  opacity: 1;
+  transform-origin: center; 
+  animation: img-18p6p-animation 10s linear infinite; 
+ }@keyframes img-18p6p-animation {
+  0% {
+    opacity: 0;
+    transform:rotate(0deg); 
+  }
+  7% {
+    opacity: 1;
+    transform:rotate(0deg); 
+  }
+  70% {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+  85% {
+    opacity: 0;
+    transform: rotate(360deg);
+  }
+  95% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+
+ .page-element-18p6p2 {
+  position: absolute;
+  left: 48vw;
+  top: 10vw;
+  height: auto;
+  width: 11vw;
+  z-index: 4;
+ }
+ 
+ .img-18p6p2 {
+  opacity: 0;
+ }
+ .img-18p6p2-active {
+  opacity: 1;
+  transform-origin: center; 
+  animation: img-18p6p2-animation 10s linear infinite; 
+ }@keyframes img-18p6p2-animation {
+  0% {
+    opacity: 0;
+    transform:translateX(0) translateY(0); 
+  }
+  87% {
+    opacity: 0 ;
+    transform: translateX(-22vw) translateY(0); 
+  }
+  90% {
+    opacity: 1;
+    transform: translateX(-22vw) translateY(0); 
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0) translateY(-2vw); 
+  }
+}
+
+ .page-element-18p6p3 {
+  position: absolute;
+  left: 39vw;
+  top: 7vw;
+  height: auto;
+  width: 8vw;
+  z-index: 4;
+ }
+ .img-18p6p3 {
+  opacity: 0;
+ }
+ .img-18p6p3-active {
+  opacity: 1;
+  transform-origin: center; 
+  animation: img-18p6p3-animation 10s linear infinite; 
+ }@keyframes img-18p6p3-animation {
+  0% {
+    opacity: 0;
+    transform:translateX(0) translateY(0); 
+  }
+  20% {
+    opacity: 0 ;
+    transform: translateX(-21vw) translateY(0); 
+  }
+  25% {
+    opacity: 1;
+    transform: translateX(-21vw) translateY(0); 
+  }
+  40% {
+    opacity: 1;
+    transform: translateX(-15vw) translateY(0); 
+  }
+
+  55% {
+    opacity: 1;
+    transform: translateX(-15vw) translateY(0); 
+  }
+  70% {
+    opacity: 1;
+    transform: translateX(-15vw) translateY(2vw);
+  }
+  85% {
+    opacity: 1;
+    transform: translateX(-15vw) translateY(0);
+  }
+  95% {
+    opacity: 1;
+    transform: translateX(-15vw) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(0) translateY(0);
+  }
+}
+ .page-element-18p6p4 {
+  position: absolute;
+  left: 10vw;
+  top: 7vw;
+  height: auto;
+  width: 11vw;
+  z-index: 4;
+ }
+ .img-18p6p4 {
+  opacity: 0;
+ }
+ .img-18p6p4-active {
+  opacity: 1;
+  transform-origin: center; 
+  animation: img-18p6p4-animation 10s linear infinite; 
+ }@keyframes img-18p6p4-animation {
+  0% {
+    opacity: 0;
+    transform: rotate(0deg); 
+  }
+  10% {
+    opacity: 1 ;
+    transform: rotate(0deg); 
+  }
+  20% {
+    opacity: 1;
+    transform: rotate(360deg); 
+  }
+  50% {
+    opacity: 1;
+    transform: rotate(360deg); 
+  }
+
+  55% {
+    opacity: 0;
+    transform: rotate(360deg); 
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(360deg);
+  }
+}
+
  .page-element-18p7 {
   position: absolute;
   left: 2vw;
-  top: 127vw;
+  top: 0vw;
   height: auto;
   width: 55vw;
  }
  .page-element-18p8 {
   position: absolute;
   left: 42vw;
-  top: 127vw;
+  top: 0vw;
   height: auto;
   width: 55vw;
  }
+.page-element-18p8-container {
+  position: absolute;
+  left: 0vw;
+  top: 127vw;
+  height: 15vw;
+  width: 100vw;
+}
+
+.page-element-18p9 {
+  position: absolute;
+  left: 42vw;
+  top: 3vw;
+  height: auto;
+  width: 10vw;
+  z-index: 4;
+ }
+ .img-18p9 {
+  opacity: 0;
+ }
+ .img-18p9-active {
+  opacity: 1;
+  animation: element-18p9 10s linear infinite;
+ }@keyframes element-18p9 {
+  0% { 
+    opacity: 0;
+    transform: translateY(0) translateX(0); }
+    10% {
+      opacity: 1;
+    transform: translateY(0) translateX(0);
+    }
+    20% {
+      opacity: 1;
+    transform: translateY(2vw) translateX(0);
+    }
+    35% {
+      opacity: 1;
+    transform: translateY(-2vw) translateX(0);
+    }
+    40% {
+      opacity: 0;
+    transform: translateY(0) translateX(0);
+    }
+    100% {
+      opacity: 0;
+    transform: translateY(0) translateX(0);
+    }
+  
+}
+.img-18p10 {
+  opacity: 0;
+ }
+ .img-18p10-active {
+  opacity: 1;
+  animation: element-18p10 10s linear infinite;
+ }@keyframes element-18p10 {
+  0% { 
+    opacity: 0;
+    transform: translateY(0) translateX(0); }
+    40% {
+      opacity: 0;
+    transform: translateY(0) translateX(0);
+    }
+    45% {
+      opacity: 1;
+    transform: translateY(0) translateX(0);
+    }
+    60% {
+      opacity: 1;
+    transform: translateY(35vw) translateX(0);
+    }
+  70% { 
+    opacity: 1;
+    transform: translateY(35vw) translateX(30vw); }
+  80% { 
+    opacity: 1;
+    transform: translateY(35vw) translateX(30vw);}
+  100% { 
+    opacity: 0;
+    transform: translateY(35vw) translateX(30vw); }
+}
+.img-18p3 {
+  opacity: 0;
+ }
+ .img-18p3-active {
+  opacity: 1;
+  animation: element-18p3 10s linear infinite;
+ }@keyframes element-18p3 {
+  0% { 
+    opacity: 0;
+    transform: translateY(0) translateX(0); }
+    10% {
+      opacity: 1;
+    transform: translateY(0) translateX(0);
+    }
+    20% {
+      opacity: 1;
+    transform: translateY(2vw) translateX(0);
+    }
+    35% {
+      opacity: 1;
+    transform: translateY(-2vw) translateX(0);
+    }
+    40% {
+      opacity: 0;
+    transform: translateY(0) translateX(0);
+    }
+    100% {
+      opacity: 0;
+    transform: translateY(0) translateX(0);
+    }
+}
+
  .page-element-19 {
   position: absolute;
   left: 7vw;
-  top: 12vw;
+  top: 0vw;
   height: auto;
   width: 30vw;
  }
+ .img-19 {
+  /* position: relative; */
+  opacity: 0;
+  transform: translateX(-20vw); 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+ .img-19-active {
+  transform: translateX(0); 
+  opacity: 1; 
+  transition: transform 1s ease-out, opacity 1s ease-out;
+ }
+
  .page-element-20 {
   position: absolute;
   left: 30vw;
@@ -1616,7 +1970,7 @@ span.formula_line::-webkit-scrollbar-track {
  .page-element-21p {
   position: absolute;
   left: 36vw;
-  top: 15vw;
+  top: 3vw;
   height: auto;
   width: 8vw;
  }

src/contents/home.tsx

@@ -232,83 +232,131 @@ export function Home() {
             className="home-img-wide"
           />
         </div> */}
-        <div className="page-element-18p">
+        
+        
+        <Element name="element-18p3" id="element-18p3" className="element element-18p3-container">
           <img
-            src="https://static.igem.wiki/teams/5378/home/smallgut.webp"
+            src="https://static.igem.wiki/teams/5378/home/2.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-21p ${activeLink === 'element-18p3' ? 'img-18p3-active' : 'img-18p3'}`}
           />
-        </div>
-        <div className="page-element-18p2">
-          <img
-            src="https://static.igem.wiki/teams/5378/home/pathway.webp"
+        <img
+            src="https://static.igem.wiki/teams/5378/home/27.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-19 ${activeLink === 'element-18p3' ? 'img-left-in-active' : 'img-left-in'}`}
           />
-        </div>
-        <div className="page-element-18p3">
           <img
             src="https://static.igem.wiki/teams/5378/home/dialog3.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p3 ${activeLink === 'element-18p3' ? 'img-right-in-active' : 'img-right-in'}`}
           />
-        </div>
-        <div className="page-element-18p4">
           <img
+            src="https://static.igem.wiki/teams/5378/home/smallgut.webp"
+            alt="example"
+            className={`home-img-wide page-element-18p ${activeLink === 'element-18p3' ? 'img-right-in-active' : 'img-right-in'}`}
+          />
+          <img
+            src="https://static.igem.wiki/teams/5378/home/3rd/inpill.webp"
+            alt="example"
+            className={`home-img-wide page-element-18p9 ${activeLink === 'element-18p3' ? 'img-18p9-active' : 'img-18p9'}`}
+          />
+          <img
+            src="https://static.igem.wiki/teams/5378/home/7.webp"
+            alt="example"
+            className={`home-img-wide page-element-18p9 ${activeLink === 'element-18p3' ? 'img-18p10-active' : 'img-18p10'}`}
+          />
+          
+        </Element>
+        {/* sensor */}
+        <Element name="element-18p4" id="element-18p4" className="element page-element-18p4-container">
+        <img
             src="https://static.igem.wiki/teams/5378/home/dialog2.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p4 ${activeLink === 'element-18p4' ? 'img-left-in-active' : 'img-left-in'}`}
           />
-        </div>
-        <div className="page-element-18p5">
+        <img
+          src="https://static.igem.wiki/teams/5378/home/pathway.webp"
+          alt="example"
+          className={`home-img-wide page-element-18p2 ${activeLink === 'element-18p4' ? 'img-right-in-active' : 'img-right-in'}`}
+        />
+        {/* https://static.igem.wiki/teams/5378/home/3rd/pag.webp
+        https://static.igem.wiki/teams/5378/home/3rd/pcon.webp
+        https://static.igem.wiki/teams/5378/home/3rd/metabolic.webp
+        https://static.igem.wiki/teams/5378/home/3rd/pea.webp
+        https://static.igem.wiki/teams/5378/home/3rd/ptyna.webp
+        https://static.igem.wiki/teams/5378/home/3rd/tyna.webp
+        https://static.igem.wiki/teams/5378/home/3rd/fearpag.webp */}
+        </Element>
+
+{/* meta */}
+<Element name="element-18p6" id="element-18p6" className="element page-element-18p6-container">
           <img
             src="https://static.igem.wiki/teams/5378/home/dialog1.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p5 ${activeLink === 'element-18p6' ? 'img-fade-in-active' : 'img-fade-in'}`}
           />
-        </div>
-        <div className="page-element-18p6">
           <img
-            src="https://static.igem.wiki/teams/5378/home/devil.webp"
+            src="https://static.igem.wiki/teams/5378/home/3rd/board.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p6 ${activeLink === 'element-18p6' ? 'img-fade-in-active' : 'img-fade-in'}`}
           />
-        </div>
-        <div className="page-element-18p7">
           <img
-            src="https://static.igem.wiki/teams/5378/home/d1.webp"
+            src="https://static.igem.wiki/teams/5378/home/3rd/demonnh3.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p6p ${activeLink === 'element-18p6' ? 'img-18p6p-active' : 'img-18p6p'}`}
           />
-        </div>
-        <div className="page-element-18p8">
           <img
-            src="https://static.igem.wiki/teams/5378/home/d2.webp"
+            src="https://static.igem.wiki/teams/5378/home/3rd/angel.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p6p2 ${activeLink === 'element-18p6' ? 'img-18p6p2-active' : 'img-18p6p2'}`}
           />
-        </div>
-        <div className="page-element-19">
           <img
-            src="https://static.igem.wiki/teams/5378/home/27.webp"
+            src="https://static.igem.wiki/teams/5378/home/3rd/gs.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide page-element-18p6p3 ${activeLink === 'element-18p6' ? 'img-18p6p3-active' : 'img-18p6p3'}`}
+          />
+          <img
+            src="https://static.igem.wiki/teams/5378/home/3rd/plasmid.webp"
+            alt="example"
+            className={`home-img-wide page-element-18p6p4 ${activeLink === 'element-18p6' ? 'img-18p6p4-active' : 'img-18p6p4'}`}
+          />
+
+</Element>
+        
+        
+        {/* https://static.igem.wiki/teams/5378/home/3rd/board.webp
+        https://static.igem.wiki/teams/5378/home/3rd/demonnh3.webp
+        https://static.igem.wiki/teams/5378/home/3rd/angel.webp
+        https://static.igem.wiki/teams/5378/home/3rd/gs.webp */}
+        
+        {/* safety */}
+        <Element name="element-18p8" id="element-18p8" className="element page-element-18p8-container">
+        <div className="page-element-18p7">
+          <img
+            src="https://static.igem.wiki/teams/5378/home/d1.webp"
+            alt="example"
+            className={`home-img-wide ${activeLink === 'element-18p8' ? 'img-left-in-active' : 'img-left-in'}`}
           />
         </div>
-        {/* <div className="page-element-21">
+          
+          <div className="page-element-18p8">
           <img
-            src="https://static.igem.wiki/teams/5378/home/4.webp"
+            src="https://static.igem.wiki/teams/5378/home/d2.webp"
             alt="example"
-            className="home-img-wide"
+            className={`home-img-wide ${activeLink === 'element-18p8' ? 'img-right-in-active' : 'img-right-in'}`}
           />
-        </div> */}
-        <div className="page-element-21p">
+          </div>
+        </Element>
+
+
+        {/* <div className="page-element-21">
           <img
-            src="https://static.igem.wiki/teams/5378/home/2.webp"
+            src="https://static.igem.wiki/teams/5378/home/4.webp"
             alt="example"
             className="home-img-wide"
           />
-        </div>
+        </div> */}
+        
       </div>
 
       {/* 9 */}