Skip to content
Snippets Groups Projects
Commit f41b3a7e authored by Junduo Zheng's avatar Junduo Zheng
Browse files

certain

parent 41f05ecd
No related branches found
No related tags found
1 merge request!151certain
Hide whitespace changes
Inline Side-by-side
Showing
with 64 additions and 30 deletions
pages/index.vue
+ 64
− 30
View file @ f41b3a7e
<template>
<div id="index" class="test">
<div id="index" class="test overflow-hidden">
<Title>Home</Title>
<div class=" h-screen relative" id="home page" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/home.jpg) center center / cover">
<h3 class="tsaf text-center pt-52 pb-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-4xl lg:text-6xl font-bold">
<section class=" h-screen relative comparisonSection overflow-hidden" id="home page">
<!-- <h3 class="tsaf text-center pt-52 pb-5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text text-transparent text-4xl lg:text-6xl font-bold">
Welcome to peking igem
</h3>
<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>
</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/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"/>
</div>
</section>
<div id="Pancreatic Cancer1" class="h-screen" style="background: url(https://static.igem.wiki/teams/4713/wiki/index/background2.png) center center / cover">
<section class=" relative" style="height: 100%; width: 100%">
......@@ -199,14 +201,15 @@
</div>
</div>
</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">
discover more
<br>
in our wiki</p>
</div>
</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">
discover more
<br>
in our wiki</p>
</div>
</template>
......@@ -327,25 +330,30 @@ onMounted(() => {
scrollTrigger: {
trigger: a,
// markers: true,
start: "-40% 70%",
// start: "-40% 70%",
start: () => a.getBoundingClientRect().top + window.scrollY - a.offsetHeight * 0.4 + window.screen.width - window.screen.height * 0.7,
toggleActions: "restart none none reverse"
}});
})
let leftFlash = document.getElementsByClassName('left-flash');
let leftFlash = gsap.utils.toArray('.left-flash');
let flashb = document.getElementsByClassName('wordFlashb');
let flashd = document.getElementsByClassName('wordFlashd');
let ghost = gsap.timeline({
leftFlash.forEach(a=>{
let ghost = gsap.timeline({
scrollTrigger: {
trigger: leftFlash,
// markers: true,
start: "-20% 70%",
trigger: a,
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"
},
})
ghost.from(a, {opacity: 0, x: () => {return -0.5 * window.screen.width}, duration: 0.5})
.fromTo(flashb, {opacity: 1}, {duration: 1.5, opacity: 0, y: () => {return -0.2 * window.screen.height}}, 0.5)
.from(flashd, {opacity: 0, duration: 1, opacity: 0}, "<")
})
ghost.from(leftFlash, {opacity: 0, x: () => {return -0.5 * window.screen.width}, duration: 0.5})
.fromTo(flashb, {opacity: 1}, {duration: 1.5, opacity: 0, y: () => {return -0.2 * window.screen.height}}, 0.5)
.from(flashd, {opacity: 0, duration: 1, opacity: 0}, "<")
let pan = gsap.utils.toArray('.Pancreatic')
let begin = document.getElementById('Pancreatic Cancer2');
......@@ -353,8 +361,9 @@ onMounted(() => {
gsap.fromTo(a, {opacity: 0}, {duration: 0.5, opacity: 1, y: () => {return -0.2 * window.screen.height},
scrollTrigger: {
trigger: begin,
// markers: true,
start: "35% 70%",
markers: true,
// start: "35% 70%",
start: () => begin.getBoundingClientRect().top + window.scrollY - begin.offsetHeight * 0.35 + window.screen.width ,
toggleActions: "restart none none reverse"
}});
})
......@@ -365,7 +374,8 @@ onMounted(() => {
scrollTrigger: {
trigger: a,
// markers: true,
start: "-40% 70%",
start: () => a.getBoundingClientRect().top + window.scrollY - a.offsetHeight * 0.4 + window.screen.width - window.screen.height * 0.7,
// start: "40% 70%",
toggleActions: "play none none reverse"
}});
})
......@@ -376,7 +386,8 @@ onMounted(() => {
scrollTrigger: {
trigger: a,
// markers: true,
start: "-20% 70%",
// start: "-20% 70%",
start: () => a.getBoundingClientRect().top + window.scrollY - a.offsetHeight * 0.2 + window.screen.width - window.screen.height * 0.7,
toggleActions: "play none none reverse"
}});
})
......@@ -390,7 +401,8 @@ onMounted(() => {
scrollTrigger: {
trigger: fst,
// markers: true,
start: "-400% 90%",
// start: "-400% 90%",
start: () => fst.getBoundingClientRect().top + window.scrollY - fst.offsetHeight * 4 + window.screen.width - window.screen.height * 0.9,
toggleActions: "play none none reverse"
}})
})
......@@ -402,7 +414,8 @@ onMounted(() => {
scrollTrigger: {
trigger: begin,
// markers: true,
start: "35% 70%",
// start: "35% 70%",
start: () => begin.getBoundingClientRect().top + window.scrollY + begin.offsetHeight * 0.35 + window.screen.width - window.screen.height * 0.7,
toggleActions: "restart none none none"
},
})
......@@ -438,7 +451,8 @@ onMounted(() => {
scrollTrigger: {
trigger: typewriter,
// markers: true,
start: "-100px center",
// start: "-100px center",
start: () => typewriter.getBoundingClientRect().top + window.scrollY - 100 + window.screen.width - window.screen.height * 0.5,
toggleActions: "restart none none reverse",
}});
t1.to(typewriter, {borderRightWidth: 20, duration: 0})
......@@ -455,7 +469,8 @@ onMounted(() => {
var tlSplitGreat = gsap.timeline(
{ scrollTrigger: {
trigger: cloudArray,
start: "-200px center",
// start: "-200px center",
start: () => cloud.getBoundingClientRect().top + window.scrollY - 100 + window.screen.width - window.screen.height * 0.5,
// markers: true,
toggleActions: "restart none none reverse"}},
)
......@@ -474,9 +489,28 @@ onMounted(() => {
scrollTrigger:{
trigger: arrow,
// markers: true,
start: "top 10%",
// start: "top 10%",
start: () => arrow.getBoundingClientRect().top + window.scrollY + window.screen.width - window.screen.height * 0.1,
toggleActions: "play none none reverse"
}})
gsap.utils.toArray(".comparisonSection").forEach(section => {
let tl = gsap.timeline({
scrollTrigger: {
trigger: section,
start: "center center",
// makes the height of the scrolling (while pinning) match the width, thus the speed remains constant (vertical/horizontal)
end: () => "+=" + section.offsetWidth,
scrub: true,
pin: true,
anticipatePin: 1
},
defaults: {ease: "none"}
});
// animate the container one way...
tl.to(section.querySelector(".beforeImage"), { xPercent: -100, x: 0})
// ...and the image the opposite way (at the same time)
});
})
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment