Then, we tell the observer instance to observe our DOM node with observer.observe(domRef.current).īefore we're done, however, we need to clean up a bit - we need to remove the intersection listener from our DOM node whenever we unmount it! Luckily, we can return a cleanup function from useEffect, which will do this for us. whenever you scroll, zoom or new stuff comes on screen). We pass in a callback function, which will be called every time any DOM element registered to this observer changes its "status" (i.e. The setup of the intersection observer might look a bit unfamiliar, but it's pretty simple once you understand what's going on.įirst, we create a new instance of the IntersectionObserver class.
Create the intersection observer and starting to observe with useEffect.Create a reference to a DOM node with useRef.Create a state variable indicating whether the section is visible or not with useState.
#Fade in css code
You can read more about each of these hooks in the documentation, but in our code we're doing the following: If you want to understand what's happening, I've written a step-by-step guide below, that explains what happens.įirst, we call three built in React Hooks - useState, useRef and useEffect. If you're looking for a copy and paste solution - here you go. Here's the code for implementing our component: And since we're using React, we can write a nice reusable component that we can re-use across our application. We're not digging too deep into the other cool stuff you can do with intersection observers in this article though, we're just implementing a nice "fade in on entry"-feature. It gives us some positional data, as well as nice-to-have properties like isIntersecting, which tell us whether something is visible or not. Quickly summarized, however, an intersection observer accepts a DOM node, and calls a callback function whenever it enters (or exits) the viewport. If you want to dig deep, I suggest you read this MDN article on the subject. The IntersectionObserver API is a really powerful tool for tracking whether something is on-screen, either in part or in full. Wouldn't it be nice if an event was triggered when your content was visible? We're going to use the IntersectionObserver DOM API to implement that behavior. Looks cool right? Now, how cool would it be if we had this effect whenever we scroll a new content block into the viewport? We're also transitioning the visibility property from hidden to visible. We also specify an initial opacity of 0.īy transitioning these two properties, we'll get the effect we're after. Here, we use the transform property to initially move our container down 1/5th of the viewport (or 20 viewport height units). The animation property allows you to adjust the CSS fade-in timing.Enter fullscreen mode Exit fullscreen mode
This animation would start when the page loaded, giving the impression that it was fading in. The animation seamlessly fades into the page when the animation type is set to easy. In one, the opacity is set to 0, whereas in the other, it is set to 1. How the Animation Property and Rule Create Fade-in Effect Normally, animations begin as soon as the page loads, but you may postpone their start time with the animation-delay parameter. Additionally, while animations don't require triggers like a hover, CSS transitions must. However, you can only do this using the animation property if you want the element to switch from orange to blue to red. An excellent illustration is allowing an element to shift from orange to blue. If we want to use CSS's transition property, we have to define an initial and a final state without the requirement for any in-between points. We may use either the animation or the transition property to do this. A text, background, or image element may be made to gradually emerge on a web page using the CSS fade-in transition feature of CSS.
0 kommentar(er)
