index

pages/index.vue

@@ -8,7 +8,7 @@
       <h1 class="tsaf text-center pt-32 pb-64 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-8xl lg:text-9xl font-bold">
         Crown Assassin
       </h1> -->
-        <img src="https://static.igem.wiki/teams/4713/wiki/index/home2.png" alt="after" style="width: 100%; height:100%; top:0% overflow:hidden;" class=" absolute comparisonImage afterImage"> 
+        <img src="https://static.igem.wiki/teams/4713/wiki/index/home9.png" alt="after" style="width: 100%; height:100%; top:0% overflow:hidden;" class=" absolute comparisonImage afterImage"> 
         <img src="https://static.igem.wiki/teams/4713/wiki/index/cer.png" alt="before" style="width: 100%; height:100%; top:0%; overflow:hidden; left:0%" class=" absolute comparisonImage beforeImage">
       <Indexwave class=" absolute bottom-[0] w-full"/>
     </section>
@@ -90,10 +90,10 @@
 
 
     <div class="h-screen relative" id="Our Project1" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover; display: flex; flex-direction: column; align-items: center; justify-content: center;">
-      <div class="absolute cloud text-center max-w-sm mx-auto pt-10 pb-[10vh] text-1xl lg:text-3xl" style="font-family: 'Consolas', sans-serif; max-width: 1100px; top: 5%">
+      <div class="absolute cloud text-center max-w-[80%] mx-auto pt-10 pb-[10vh] text-1xl lg:text-3xl" style="top: 5%">
         People are calling for new therapies to replace or assist the current treatments. Within 10 years, new technologies such as genetic therapy, CAR-T and RNA therapy have been rapidly developed. Meanwhile, bacterial therapy has also been introduced as a potential alternative.
       </div>
-      <div class="absolute cloud text-center max-w-base mx-auto pt-10 " style="max-width: 800px; top:50%">
+      <div class="absolute cloud text-center max-w-base mx-auto pt-10 max-w-[60%]" style="top:50%">
         <span class="typewriter text-2xl lg:text-4xl border-r-black" style="font-family: 'Consolas', sans-serif; "></span>
       </div>
     </div>
@@ -109,8 +109,8 @@
 
     <div class="h-screen" id="Our Project2" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover;">
       <h2 class="wordfrom text-center mx-auto pt-[15vh] lg:text-5xl text-3xl font-bold">Our Project</h2>
-      <div class="wordfrom cloud text-center mx-auto pt-[10vh] pl-[15vw] pr-[15vw]" style="display: grid; grid-template-columns: 50% 50%; align-items: start; grid-column-gap: -20px; max-width: 1800px;">
-        <div style="">
+      <div class="wordfrom cloud text-center mx-auto pt-[10vh]" style="display: grid; grid-template-columns: 50% 50%; align-items: start; grid-column-gap: -20px; max-width: 1800px;">
+        <div class="mx-auto">
           <strong><p class="lg:text-3xl text-2xl">Targeting</p></strong>
           <br>
           <br>
@@ -119,7 +119,7 @@
           <br>
           <p class="lg:text-2xl text-1xl">Stable in tumour tissues compared to antigen</p>
         </div>
-        <div style="">
+        <div class="mx-auto">
           <strong><p class="lg:text-3xl text-2xl">Function</p></strong>
           <br>
           <br>
@@ -205,7 +205,8 @@
   </div>
   <div class="h-screen" id="over" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
     <img src="https://static.igem.wiki/teams/4713/wiki/index/right-1.png" alt="right" style="width: 20% ;right: 0%" class="top-[4rem] sticky float-right arrow z-10" >
-    <p class="tsaf text-center pt-[20%] wordfrom text-7xl lg:text-9xl font-bold pb-64" style="color: #b36d61">
+    <p class="tsaf text-center pt-[20%] wordlast text-7xl lg:text-9xl font-bold pb-64" style="color: #db968a">
+      <!-- #b36d61 -->
     discover more 
     <br>
     in our wiki</p>
@@ -343,7 +344,7 @@ onMounted(() => {
     let ghost = gsap.timeline({
     scrollTrigger: {
         trigger: a,
-        markers: true,
+        // markers: true,
         // start: "-20% 70%",
         start: () => a.getBoundingClientRect().top + window.scrollY - a.offsetHeight * 0.2 + window.screen.width - window.screen.height * 0.7,
         toggleActions: "restart none none reset"
@@ -361,7 +362,7 @@ onMounted(() => {
     gsap.fromTo(a, {opacity: 0}, {duration: 0.5, opacity: 1, y: () => {return -0.2 * window.screen.height},  
     scrollTrigger: {
       trigger: begin,
-      markers: true,
+      // markers: true,
       // start: "35% 70%",
       start: () => begin.getBoundingClientRect().top + window.scrollY - begin.offsetHeight * 0.35 + window.screen.width ,
       toggleActions: "restart none none reverse"
@@ -457,7 +458,7 @@ onMounted(() => {
       }});
   t1.to(typewriter, {borderRightWidth: 20, duration: 0})
   .to(typewriter, {
-    duration: 6,
+    duration: 4,
     text:"Peking 2023 is devoted to advancing bacterial therapy and introducing innovative modifications to revolutionize pancreatic cancer treatment.",
     ease: "none",
   }, "<")
@@ -477,7 +478,7 @@ onMounted(() => {
 //   SplitGreat = new SplitText(cloud, {type:"words,chars"}), 
 //   chars = SplitGreat.chars;
   tlSplitGreat.from(cloudArray, {
-    duration: 0.8,
+    duration: 0.4,
     opacity:0,
     y:10,
     ease:"circ.out",
@@ -511,6 +512,18 @@ onMounted(() => {
 	tl.to(section.querySelector(".beforeImage"), { xPercent: -100, x: 0})
 	  // ...and the image the opposite way (at the same time)
 });
+
+  let wordlast = gsap.utils.toArray(".wordlast")
+    wordlast.forEach(a=>{
+      gsap.from(a, {opacity: 0, y: () => {return 0.2 * window.screen.height}, duration: 0.5, 
+      scrollTrigger: {
+        trigger: a,
+        // markers: true,
+        start: () => a.getBoundingClientRect().top + window.scrollY - a.offsetHeight * 0.4 + window.screen.width - window.screen.height * 1.55,
+        // start: "40% 70%",
+        toggleActions: "play none none reverse"
+      }});
+    })
 })