diff --git a/pages/index.vue b/pages/index.vue
index 58c99b3da0d0d8aa5e263bfa58ae4fb77e31dbe1..e9f691db6aa67c4565b304db6d04533d405febcd 100644
--- a/pages/index.vue
+++ b/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"
+ }});
+ })
})