Skip to content
Snippets Groups Projects
Commit c39df0fa authored by Maximilian Leo Huber's avatar Maximilian Leo Huber
Browse files

full breathe scroll anim

parent af8de610
No related branches found
No related tags found
No related merge requests found
Pipeline #426319 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/components/Breathe.tsx 0 → 100644
+ 223
− 0
View file @ c39df0fa
import { useEffect, useRef, useState } from "react";
export function Breathe(){
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!);
}, []);
const [isVisible7, setVisible7] = useState(false);
const domRef7 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible7(entry.isIntersecting));
});
observer.observe(domRef7.current!);
}, []);
const [isVisible8, setVisible8] = useState(false);
const domRef8 = useRef(null)!;
useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible8(entry.isIntersecting));
});
observer.observe(domRef8.current!);
}, []);
return (
<>
{/* purple */}
<div
className='col'
style={{ 'height': '700vh'}}
ref={domRef}>
<img
style={{
'zIndex': '1',
'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="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-1.webp">
</img>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef2}>
<p>Take a moment to deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '95vh' }}></div>
<div style={{ 'height': '100vh'}} ref={domRef3}>
<p>and deeply breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>Your feel <strong>revitalized</strong> - Your body and mind become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>Now deeply breathe in and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* black */}
<div
style={{ 'height': '400vh'}} ref={domRef5}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-2.webp">
</img>
<div style={{ 'height': '100vh'}} ref={domRef6}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkpurplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>With every second, you feel more stressed.</p>
<p>Your body fights against it, and your mind begins to panic...</p>
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/circles/blackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p>Breathe out! Feel the relief!</p>
</div>
{/* grey */}
<div
style={{ 'height': '200vh'}} ref={domRef8}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '20vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<p>Imagine yourself living in constant fear of suffocation, because breathing deeply is a <strong>privilage not everyone can enjoy</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
);
}
\ No newline at end of file
src/contents/Home.tsx
+ 1
− 12
View file @ c39df0fa
......@@ -8,18 +8,7 @@ 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" 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>
<Breathe></Breathe>
<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>
......
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