Created
July 28, 2022 16:23
-
-
Save ddanielsantos/c67f5c449d54f93d0d501100ebc6eca6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const [bgColor, setBgColor] = useState('initial color here') | |
| useEffect(() => { | |
| const observer = new IntersectionObserver(entries => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const { backgroundColor } = getComputedStyle(entry.target) | |
| setBgColor(backgroundColor) | |
| } | |
| }) | |
| }, { root: null, threshold: 0.6 }) | |
| const boxes = document.querySelectorAll('main > *') | |
| boxes.forEach((box) => { | |
| observer.observe(box) | |
| }) | |
| return () => { | |
| boxes.forEach((box) => { | |
| observer.unobserve(box) | |
| }) | |
| } | |
| }, []) | |
| return ( | |
| <main | |
| style={{ | |
| width: '100%', | |
| flexDirection: 'column', | |
| alignItems: 'center', | |
| display: 'flex', | |
| backgroundColor: bgColor, | |
| transition: 'ease-out 0.5s' | |
| }} | |
| > | |
| <div style={{ backgroundColor: 'red', minHeight: '100vh', border: '1px solid yellow', width: '50%' }} /> | |
| <div style={{ backgroundColor: 'blue', minHeight: '100vh', border: '1px solid yellow', width: '50%' }} /> | |
| </main> | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment