From 7caee46f4afab7ef506983a3735fbda0933c2cb8 Mon Sep 17 00:00:00 2001
From: Maximilian Leo Huber <maximilian.huber@uni-bielefeld.de>
Date: Mon, 16 Sep 2024 06:18:43 +0000
Subject: [PATCH] fixed pos for images
---
src/components/FadeIn.tsx | 36 ++++++++++++++++++++++++++++++++++++
src/contents/Home.tsx | 27 +++++----------------------
2 files changed, 41 insertions(+), 22 deletions(-)
create mode 100644 src/components/FadeIn.tsx
diff --git a/src/components/FadeIn.tsx b/src/components/FadeIn.tsx
new file mode 100644
index 00000000..17bd333c
--- /dev/null
+++ b/src/components/FadeIn.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react";
+import { SpacingBlock } from "./SpacingBlock";
+
+export function FadeIn({filepath}:{filepath: string}){
+ const [isVisible, setVisible] = useState(false);
+ const domRef = useRef(null)!;
+ useEffect(() => {
+ const observer = new IntersectionObserver(entries => {
+ entries.forEach(entry => setVisible(entry.isIntersecting));
+ {/* debug */}
+ entries.forEach(entry => console.log(entry.isIntersecting));
+ });
+ observer.observe(domRef.current!);
+ }, []);
+
+ return (
+ <>
+ <div
+ className='row col'
+ style={{ 'height': '100vh'}}
+ ref={domRef}>
+ <img
+ style={{
+ 'position': 'fixed',
+ 'bottom': '0',
+ 'right': '0',
+ 'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
+ 'opacity': `${isVisible ? '1' : '0'}`,
+ 'visibility': `${isVisible ? 'visible' : 'hidden'}`
+ }}
+ src={filepath}>
+ </img>
+ </div>
+ </>
+ );
+}
\ No newline at end of file
diff --git a/src/contents/Home.tsx b/src/contents/Home.tsx
index 03e7fe2a..f2242329 100644
--- a/src/contents/Home.tsx
+++ b/src/contents/Home.tsx
@@ -1,29 +1,12 @@
-import React, { useEffect, useRef } from "react";
+import { FadeIn } from "../components/FadeIn";
export function Home() {
- const [isVisible, setVisible] = React.useState(false);
- const domRef = useRef(null)!;
- useEffect(() => {
- const observer = new IntersectionObserver(entries => {
- entries.forEach(entry => setVisible(entry.isIntersecting));
- {/* debug */}
- entries.forEach(entry => console.log(entry.isIntersecting));
- });
- observer.observe(domRef.current!);
- }, []);
-
return (
<>
- <div className='row col'
- style={{
- 'transition': 'opacity 0.6s ease-out, transform 1.2s ease-out',
- 'opacity': `${isVisible ? '1' : '0'}`,
- 'transform': `${isVisible ? 'none' : 'translateY(20vh)'}`,
- 'visibility': `${isVisible ? 'visible' : 'hidden'}`
- }}
- ref={domRef}>
- <img src="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></img>
- </div>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstperson.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathin.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutrelease.webp"></FadeIn>
+ <FadeIn filepath="https://static.igem.wiki/teams/5247/landing/firstbreathoutdone.webp"></FadeIn>
</>
);
}
--
GitLab