From 212b89d5b4c7335643503b220b8aeef95123b686 Mon Sep 17 00:00:00 2001 From: Belle Date: Mon, 26 Aug 2024 14:04:50 +0800 Subject: [PATCH] responsive changes --- components/arcade/review/preview.js | 67 ++++- pages/arcade/review.js | 408 ++++++++++++++++------------ 2 files changed, 287 insertions(+), 188 deletions(-) diff --git a/components/arcade/review/preview.js b/components/arcade/review/preview.js index 4b3ec0bb..9ccd8967 100644 --- a/components/arcade/review/preview.js +++ b/components/arcade/review/preview.js @@ -1,43 +1,82 @@ -import { Text } from "theme-ui" -import { Balancer } from "react-wrap-balancer" +import { Text } from 'theme-ui' +import { Balancer } from 'react-wrap-balancer' +import Fade from 'react-reveal/Fade' +import { useInView } from 'react-intersection-observer' + /** @jsxImportSource theme-ui */ export default function Preview({ text, img, imgAlt, - ref, - opacity, + isSmallScreen, + // ref, + // opacity, + // inView, elementRef }) { + const { ref, inView } = useInView({ threshold: 0.95 }) + return (
- - {text} - + {isSmallScreen ? ( + + {text} + + ) : ( + inView && ( + + + {text} + + + ) + )} +
- {imgAlt} + {imgAlt}
diff --git a/pages/arcade/review.js b/pages/arcade/review.js index 8594ae45..1c0a39d9 100644 --- a/pages/arcade/review.js +++ b/pages/arcade/review.js @@ -157,14 +157,15 @@ const projectVariants = { y: '90vh', opacity: 0 }, - animate: ({ index, testData, instances }) => { + animate: ({ index }) => { return { x: 0, y: '90vh', opacity: 1, transition: { - duration: 1, - delay: index * 3.5 + duration: 0.73, + delay: index * 3.5, + ease: 'backOut' }, repeat: 0 } @@ -181,58 +182,58 @@ const projectVariants = { } } -function useParallax(value, distance) { - return useTransform(value, [0, 1], [-distance, distance]) -} +// function useParallax(value, distance) { +// return useTransform(value, [0, 1], [-distance, distance]) +// } -function useScrollPosition(containerRef) { - const [scrollPosition, setScrollPosition] = useState(0) - const elementRef = useRef(null) +// function useScrollPosition(containerRef) { +// const [scrollPosition, setScrollPosition] = useState(0) +// const elementRef = useRef(null) - useEffect(() => { - const handleScroll = () => { - if (!containerRef.current || !elementRef.current) return +// useEffect(() => { +// const handleScroll = () => { +// if (!containerRef.current || !elementRef.current) return - // const parentRect = containerRef.current.getBoundingClientRect() - const elementRect = elementRef.current.getBoundingClientRect() - // const scrollTop = containerRef.current.scrollTop - //elementRect.top - parentRect.top - scrollTop - setScrollPosition(elementRect.top) - } +// // const parentRect = containerRef.current.getBoundingClientRect() +// const elementRect = elementRef.current.getBoundingClientRect() +// // const scrollTop = containerRef.current.scrollTop +// //elementRect.top - parentRect.top - scrollTop +// setScrollPosition(elementRect.top) +// } - if (!containerRef.current) return +// if (!containerRef.current) return - const parentElement = containerRef.current +// const parentElement = containerRef.current - parentElement.addEventListener('scroll', handleScroll) +// parentElement.addEventListener('scroll', handleScroll) - handleScroll() +// handleScroll() - return () => { - parentElement.removeEventListener('scroll', handleScroll) - } - }, [containerRef, scrollPosition]) +// return () => { +// parentElement.removeEventListener('scroll', handleScroll) +// } +// }, [containerRef, scrollPosition]) - return [elementRef, scrollPosition] -} +// return [elementRef, scrollPosition] +// } const Review = () => { - const [opacity, setOpacity] = useState(1) - const [showContent, setShowContent] = useState(false) + // const [opacity, setOpacity] = useState(1) const [map, setMap] = useState(null) const [showHighlight, setShowHighlight] = useState(false) const { ref, inView, entry } = useInView({ threshold: 0 }) + // const { ref: elRef, inView: elInView } = useInView({ threshold: 0.8 }) - const newRef = useRef(null) + // const newRef = useRef(null) const containerRef = useRef(null) - const { scrollYProgress } = useScroll({ - container: containerRef, - target: newRef - }) + // const { scrollYProgress } = useScroll({ + // container: containerRef, + // target: newRef + // }) - const y = useParallax(scrollYProgress, 300) + // const y = useParallax(scrollYProgress, 300) - const [elementRef, scrollPosition] = useScrollPosition(containerRef) + // const [elementRef, scrollPosition] = useScrollPosition(containerRef) const [animationStates, setAnimationStates] = useState( testData.map(() => 'animate') @@ -246,41 +247,44 @@ const Review = () => { ) } - useEffect(() => { - setShowContent(true) - }, []) + // useEffect(() => { + // const handleScroll = () => { + // console.log(scrollPosition) + // let newOpacity = 1 - useEffect(() => { - const handleScroll = () => { - console.log(scrollPosition) - let newOpacity = 1 + // //FIGURE OUT A WAY TO MAKE THIS RESPONSIVE TO DIFF HEIGHTS + // if ( + // (scrollPosition > 90 && scrollPosition < 800) || + // (scrollPosition > 900 && scrollPosition < 1600) || + // (scrollPosition > 1650 && scrollPosition < 2450) || + // (scrollPosition > 2500 && scrollPosition < 3270) + // ) { + // newOpacity = 0 + // } - //FIGURE OUT A WAY TO MAKE THIS RESPONSIVE TO DIFF HEIGHTS - if ( - (scrollPosition > 90 && scrollPosition < 800) || - (scrollPosition > 900 && scrollPosition < 1600) || - (scrollPosition > 1650 && scrollPosition < 2450) || - (scrollPosition > 2500 && scrollPosition < 3270) - ) { - newOpacity = 0 - } + // setOpacity(Math.max(0, Math.min(1, newOpacity))) + // } - setOpacity(Math.max(0, Math.min(1, newOpacity))) - } + // window.addEventListener('scroll', handleScroll) - window.addEventListener('scroll', handleScroll) + // handleScroll() - handleScroll() - - return () => { - window.removeEventListener('scroll', handleScroll) - } - }, [scrollPosition]) + // return () => { + // window.removeEventListener('scroll', handleScroll) + // } + // }, [scrollPosition]) const [isSmallScreen, setIsSmallScreen] = useState(0) useEffect(() => { - setIsSmallScreen(window.innerWidth <= 780) + const updateScreenSize = () => { + setIsSmallScreen(window.innerWidth <= 780) + } + + window.addEventListener('resize', updateScreenSize) + updateScreenSize() + + return () => window.removeEventListener('resize', updateScreenSize) }, []) // Spotlight effect @@ -333,6 +337,9 @@ const Review = () => { } }, [highlightInView, socialContainerInView, rundownRefInView]) + // useEffect(() => { + // console.log(elInView) + // }, [elInView]) //MAP if (!map) { return
Loading...
@@ -363,7 +370,9 @@ const Review = () => { scrollSnapAlign: 'start' }} > -
+
{ One Summer. 10,000 students. The ultimate hackathon. @@ -487,7 +496,8 @@ const Review = () => { color: '#35290F', pb: 6, position: 'relative', - scrollSnapAlign: 'start' + scrollSnapAlign: 'start', + height: '100vh' }} ref={rundownRef} > @@ -511,144 +521,194 @@ const Review = () => {
- {inView && ( + {isSmallScreen ? ( <>
- -
- + as="h1" + > + 10,000 + + + high schoolers +
- -
- + as="h1" + > + 150,000 + + + hours building +
- -
- + as="h1" + > + 2,000 + + + projects +
-
- -
- + as="h1" + > + $200,000 + + + in prizes +
+ ) : ( + inView && ( + <> +
+ +
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ + ) )}
- {showContent && ( +
+ -
- - The 10,000 Arcaders from 50 different countries have.... - -
- {details.map((image, index) => ( - - ))} -
+ The 10,000 Arcaders from 50 different countries have.... + +
+ {details.map((image, index) => ( + + ))}
- )} +
{ backgroundSize: 'cover', backgroundRepeat: 'no-repeat', position: 'relative', - minHeight: '100vh' + height: '100%' }} >