Trigger a Function when Scrolling to an Element in React with Intersection Observer
98.9 هزار بار بازدید -
2 سال پیش
-
Learn how to trigger functionality
Learn how to trigger functionality whenever someone scrolls to an HTML element in React with the browser's Intersection Observer API.
We'll walk through using the useRef hook to access a DOM node, using the Intersection Observer to detect if that element is visible inside of the useEffect hook, storing it's visibility in useState, using a hook library, and triggering CSS animations when scrolling down a page.
🧐 What's Inside
00:00 - Intro
00:13 - What tools we'll use like Intersection Observer and React
01:33 - Creating a new React app using a Next.js demo starter
03:01 - Using the useRef hook to access a reference to an HTML DOM node
03:38 - Accessing a Ref in React with useEffect
04:35 - Detecting HTML element visibility with Intersection Observer
06:24 - Storing element visibility state with the useState hook
07:57 - Installing React Intersection Observer hook to simplify code
09:23 - Triggering a CSS animation when scrolling to an element
11:59 - Outro
🗒️ Read More
https://spacejelly.dev/posts/how-to-t...
💾 Code
https://github.com/colbyfayock/my-scr...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
Twitter: colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
Twitch: colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
Demo Landing Starter
https://github.com/colbyfayock/demo-l...
Intersection Observer
https://developer.mozilla.org/en-US/d...
React Intersection Observer
https://github.com/thebuilder/react-i...
🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/eric-haley/lone-...
License code: LBXM57TITUFTCUND
#colbyfayock #intersectionobserver #reactjs #react #reactjstutorial #nextjs #javascript #webdevelopment
We'll walk through using the useRef hook to access a DOM node, using the Intersection Observer to detect if that element is visible inside of the useEffect hook, storing it's visibility in useState, using a hook library, and triggering CSS animations when scrolling down a page.
🧐 What's Inside
00:00 - Intro
00:13 - What tools we'll use like Intersection Observer and React
01:33 - Creating a new React app using a Next.js demo starter
03:01 - Using the useRef hook to access a reference to an HTML DOM node
03:38 - Accessing a Ref in React with useEffect
04:35 - Detecting HTML element visibility with Intersection Observer
06:24 - Storing element visibility state with the useState hook
07:57 - Installing React Intersection Observer hook to simplify code
09:23 - Triggering a CSS animation when scrolling to an element
11:59 - Outro
🗒️ Read More
https://spacejelly.dev/posts/how-to-t...
💾 Code
https://github.com/colbyfayock/my-scr...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
Twitter: colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
Twitch: colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
Demo Landing Starter
https://github.com/colbyfayock/demo-l...
Intersection Observer
https://developer.mozilla.org/en-US/d...
React Intersection Observer
https://github.com/thebuilder/react-i...
🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/eric-haley/lone-...
License code: LBXM57TITUFTCUND
#colbyfayock #intersectionobserver #reactjs #react #reactjstutorial #nextjs #javascript #webdevelopment
2 سال پیش
در تاریخ 1400/11/14 منتشر شده
است.
98,917
بـار بازدید شده