-
Asal Sahami Moghaddam authoredAsal Sahami Moghaddam authored
Breathe.tsx 11.38 KiB
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': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible ? '1' : '0'}`,
'visibility': `${isVisible ? 'visible' : 'hidden'}`
}}
id="breathf" 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 id="breatht" style={{'fontSize' : '2.5em'}}>Take a moment to</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>deeply breathe in...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible2 ? '1' : '0'}`,
'visibility': `${isVisible2 ? 'visible' : 'hidden'}`
}}
id="breathf" 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 id="breatht" style={{'fontSize' : '2.5em'}}>and deeply.</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>breathe out...</p>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible3 ? '0' : '1'}`,
'visibility': `${isVisible3 ? 'visible' : 'hidden'}`
}}
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p id="breatht" style={{'fontSize' : '2.5em'}}>You feel <strong>revitalized</strong></p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>Your body and mind</p>
<p id="breatht" style={{'fontSize' : '2.5em'}}>become <strong>grounded</strong>.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Now deeply breathe in</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>and hold your breath.</p>
<div style={{ 'height': '100vh'}} ref={domRef4}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'scale 2.0s ease-out',
'scale': `${isVisible4 ? '1' : '0'}`,
'visibility': `${isVisible4 ? 'visible' : 'hidden'}`
}}
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/purplecircle.webp"></img>
</div>
</div>
{/* black */}
<div
style={{ 'height': '300vh'}} ref={domRef5}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible5 ? '1' : '0'}`,
'visibility': `${isVisible5 ? 'visible' : 'hidden'}`
}}
id="breathf"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': '30vw',
'width': '60vw',
'height': '60vh',
'visibility': `${isVisible6 ? 'visible' : 'hidden'}`
}}
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/darkerpurplecircle.webp"></img>
</div>
<p id="breatht"style={{'fontSize' : '2.5em'}}>Breathing is </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>essential.</p>
{/* <p style={{'fontSize' : '2.5em'}}>Breathing is essential, </p>
<p style={{'fontSize' : '2.5em'}}>but many people </p>
<p style={{'fontSize' : '2.5em'}}>struggle with it.</p> */}
<div style={{ 'height': '100vh'}} ref={domRef7}>
<img style={{
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'scale': `${isVisible7 ? '1' : '0'}`,
'visibility': `${isVisible7 ? 'visible' : 'hidden'}`
}}
id="breathf"src="https://static.igem.wiki/teams/5247/landing/breath/circles/fullblackcircle.webp"></img>
</div>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
<p id="breatht"style={{'fontSize' : '2.5em'}}>That is why we </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>persue gene therapy for </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>cystic fibrosis.</b></p>
</div>
{/* grey */}
<div
style={{ 'height': '200vh'}} ref={domRef8}>
<img
style={{
'zIndex': '1',
'position': 'fixed',
'top': '20vh',
'left': '30vw',
'width': '60vw',
'height': '60vh',
'transition': 'opacity 0.6s ease-out',
'opacity': `${isVisible8 ? '1' : '0'}`,
'visibility': `${isVisible8 ? 'visible' : 'hidden'}`
}}
id="breathf" src="https://static.igem.wiki/teams/5247/landing/breath/textless/breath-only-3.webp">
</img>
</div>
<p id="breatht"style={{'fontSize' : '2.5em'}}>To help restore the ability </p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>to breathe freely, offering</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}><b>hope</b> to those whose lungs</p>
<p id="breatht"style={{'fontSize' : '2.5em'}}>can not properly function</p> {/* on their own. */}
<p id="breatht"style={{'fontSize' : '2.5em'}}>on their own.</p>
{/* Spacing Block */}
<div className='col' style={{ 'height': '100vh' }}></div>
</>
);
}