- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- React
- SCSS
- Flexbox
- CSS Grid
- Laptop-first workflow
I finally had a good grasp of intersection observer api. I used it to create a stick header and reveal sections as i scroll.
.featureItem {
margin-bottom: 2rem;
@media only screen and (max-width: $bp-smallest) {
margin-bottom: 0;
margin: 2rem 3rem;
}
& h3 {
font-size: 2rem;
font-weight: 300;
margin-top: 2rem;
color: $color-primary-1;
animation-name: titleAnimation;
animation-timing-function: ease-in-out;
animation-duration: 6s;
animation-fill-mode: forwards;
}
& p {
width: 100%;
}
useEffect(() => {
const current = containerRef.current;
const observer = new IntersectionObserver(callBackFn, options);
if (current) observer.observe(current);
return () => {
if (current) {
observer.unobserve(current);
console.log(current);
}
};
}, [containerRef]);
};
I would love to do more with the intersection observer api. I also would want to practice http request, ajax and asynchronous javascript.
- Frontend Mentor - @ejim11
- Twitter - @favourejim56