From 859b009da5552c0d4d93b5090c12723288d83d73 Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Wed, 25 Sep 2024 15:02:34 +0000
Subject: [PATCH] primeguide anim
---
src/components/PrimeGuide.tsx | 336 ++++++++++++++++++++++++++++++++++
src/contents/Home.tsx | 9 +-
2 files changed, 343 insertions(+), 2 deletions(-)
create mode 100644 src/components/PrimeGuide.tsx
diff --git a/src/components/PrimeGuide.tsx b/src/components/PrimeGuide.tsx
new file mode 100644
index 00000000..ca093cd1
--- /dev/null
+++ b/src/components/PrimeGuide.tsx
@@ -0,0 +1,336 @@
+import { useEffect, useRef, useState } from "react";
+
+export function PrimeGuideAnimOne(){
+ const [isVisible, setVisible] = useState(false);
+ const domRef = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible(entry.isIntersecting));
+ });
+ observer.observe(domRef.current!);
+ }, []);
+
+ const [isVisible2, setVisible2] = useState(false);
+ const domRef2 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible2(entry.isIntersecting));
+ });
+ observer.observe(domRef2.current!);
+ }, []);
+
+ const [isVisible3, setVisible3] = useState(false);
+ const domRef3 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible3(entry.isIntersecting));
+ });
+ observer.observe(domRef3.current!);
+ }, []);
+
+ const [isVisible4, setVisible4] = useState(false);
+ const domRef4 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible4(entry.isIntersecting));
+ });
+ observer.observe(domRef4.current!);
+ }, []);
+
+
+ const [isVisible5, setVisible5] = useState(false);
+ const domRef5 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible5(entry.isIntersecting));
+ });
+ observer.observe(domRef5.current!);
+ }, []);
+
+ return (
+ <>
+ {/* One */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+ ref={domRef}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone1.webp">
+ </img>
+ </div>
+ {/* Two */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible2 ? '1' : '0'}`,
+ 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+ ref={domRef2}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone2.webp">
+ </img>
+ </div>
+ {/* Three */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible3 ? '1' : '0'}`,
+ 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+ ref={domRef3}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone3.webp">
+ </img>
+ </div>
+ {/* Four */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible4 ? '1' : '0'}`,
+ 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+ ref={domRef4}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone4.webp">
+ </img>
+ </div>
+ {/* Five */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible5 ? '1' : '0'}`,
+ 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+ ref={domRef5}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguideone5.webp">
+ </img>
+ </div>
+ </>
+ );
+}
+
+export function PrimeGuideAnimTwo(){
+ const [isVisible, setVisible] = useState(false);
+ const domRef = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible(entry.isIntersecting));
+ });
+ observer.observe(domRef.current!);
+ }, []);
+
+ const [isVisible2, setVisible2] = useState(false);
+ const domRef2 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible2(entry.isIntersecting));
+ });
+ observer.observe(domRef2.current!);
+ }, []);
+
+ const [isVisible3, setVisible3] = useState(false);
+ const domRef3 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible3(entry.isIntersecting));
+ });
+ observer.observe(domRef3.current!);
+ }, []);
+
+ const [isVisible4, setVisible4] = useState(false);
+ const domRef4 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible4(entry.isIntersecting));
+ });
+ observer.observe(domRef4.current!);
+ }, []);
+
+
+ const [isVisible5, setVisible5] = useState(false);
+ const domRef5 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible5(entry.isIntersecting));
+ });
+ observer.observe(domRef5.current!);
+ }, []);
+
+ const [isVisible6, setVisible6] = useState(false);
+ const domRef6 = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible6(entry.isIntersecting));
+ });
+ observer.observe(domRef6.current!);
+ }, []);
+
+ return (
+ <>
+ {/* One */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`}}
+ ref={domRef}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo1.webp">
+ </img>
+ </div>
+ {/* Two */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible2 ? '1' : '0'}`,
+ 'visibility': `${isVisible2 ? 'visible' : 'hidden'}`}}
+ ref={domRef2}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo2.webp">
+ </img>
+ </div>
+ {/* Three */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible3 ? '1' : '0'}`,
+ 'visibility': `${isVisible3 ? 'visible' : 'hidden'}`}}
+ ref={domRef3}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo3.webp">
+ </img>
+ </div>
+ {/* Four */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible4 ? '1' : '0'}`,
+ 'visibility': `${isVisible4 ? 'visible' : 'hidden'}`}}
+ ref={domRef4}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo4.webp">
+ </img>
+ </div>
+ {/* Five */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible5 ? '1' : '0'}`,
+ 'visibility': `${isVisible5 ? 'visible' : 'hidden'}`}}
+ ref={domRef5}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo5.webp">
+ </img>
+ </div>
+ {/* Six */}
+ <div
+ className='col'
+ style={{
+ 'height': '100vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible6 ? '1' : '0'}`,
+ 'visibility': `${isVisible6 ? 'visible' : 'hidden'}`}}
+ ref={domRef6}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ }}
+ src="https://static.igem.wiki/teams/5247/landing/primeguide/primeguidetwo6.webp">
+ </img>
+ </div>
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index b779a3db..f0594068 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -2,6 +2,7 @@ import { FadeIn } from "../components/FadeIn";
import { Breathe } from "../components/Breathe";
import { Problems } from "../components/Problems";
import { AirbuddyAnim } from "../components/AirbuddyAnim";
+import { PrimeGuideAnimOne, PrimeGuideAnimTwo } from "../components/PrimeGuide";
import { useTabNavigation } from "../utils/TabNavigation";
export function Home() {
@@ -34,11 +35,15 @@ export function Home() {
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/treatment-2.gif" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
<AirbuddyAnim></AirbuddyAnim>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif" bg=''></FadeIn>
<FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp" bg=''></FadeIn>
+ <PrimeGuideAnimOne></PrimeGuideAnimOne>
+ <PrimeGuideAnimTwo></PrimeGuideAnimTwo>
+
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/proofofconcept.gif" bg=''></FadeIn>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
--
GitLab