From cae487e5dae8e4cc74ad0dcd1161564fa04d39ab Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Wed, 18 Sep 2024 09:14:03 +0000
Subject: [PATCH] added count up gifs
---
src/components/FadeIn.tsx | 15 ++++++++++-
src/contents/Home.tsx | 53 +++++++++++++++++++++------------------
2 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
index 60628de6..985df75e 100644
--- a/src/components/FadeIn.tsx
+++ b/src/components/FadeIn.tsx
@@ -1,6 +1,6 @@
import { useEffect, useRef, useState } from "react";
-export function FadeIn({filepath}:{filepath: string}){
+export function FadeIn({filepath, bg}:{filepath: string, bg: string}){
const [isVisible, setVisible] = useState(false);
const domRef = useRef(null)!;
useEffect(() => {
@@ -18,6 +18,19 @@ export function FadeIn({filepath}:{filepath: string}){
className='col'
style={{ 'height': '100vh'}}
ref={domRef}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'top': '20vh',
+ 'left': '20vw',
+ 'width': '60vw',
+ 'height': '60vh',
+ 'transition': 'opacity 0.6s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`
+ }}
+ src={bg}>
+ </img>
<img
style={{
'position': 'fixed',
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index a83c4fc6..bd00ff49 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -8,33 +8,38 @@ export function Home() {
{/* Spacing Block */}
<div className='col' style={{ 'height': '70vh' }}></div>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-1.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-2.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-3.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-4.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-5.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-6.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-7.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-8.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-9.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-10.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-11.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-12.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-1.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-2.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-3.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-4.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-5.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-6.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-7.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-8.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-9.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-10.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-11.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/breath/breath-12.webp" bg=''></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-1.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-2.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-3.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-4.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-5.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-6.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-1.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-2.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-3.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-4.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-5.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/problems/problems-6.webp" bg=''></FadeIn>
+
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/200k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-1-text.webp'></FadeIn>
+
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty-1.webp" bg=''></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty-2.webp" bg=''></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty-1.webp"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/oneintwenty-2.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/2k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-2-text.webp'></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/gifs/3k-anim-transparent-bg.gif" bg='https://static.igem.wiki/teams/5247/landing/backgrounds/background-3-text.webp'></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/precyse.gif"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/airbuddy.gif"></FadeIn>
- <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/primeguide.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/treatmentnoloop.gif" bg=''></FadeIn>
+ <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>
{/* Spacing Block */}
<div className='col' style={{ 'height': '150vh' }}></div>
--
GitLab