diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
index 60628de62c29c777c10268c72b93f605dcc8423c..985df75e0439097f21d55c75968f5483300c8573 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 a83c4fc6faba97571025b3fe6ab4f18eef5f51be..bd00ff49ddfa3160e152ebd7814803f2721dc7e9 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>