Gatsby/React - 在滚动条上淡出部分?
Gatsby/React - fade out section on scroll?
我一直在尝试使用 gatsby-plugin-scroll-reveal
,它使用 Sal.js 为我网站上的英雄部分制作动画。我正在努力使英雄中的文本在您向下滚动页面时淡入然后淡出。现在,我只能让它淡入。如何使用 Sal.js 或其他方式实现它?
我还尝试了另一种方法,创建了一个使用 IntersectionObserver DOM API 的组件,但我无法让它真正起作用。
组件如下:
import React from 'react';
import ReactDOM from 'react-dom';
function FadeInSection(props) {
const [isVisible, setVisible] = React.useState(true);
const domRef = React.useRef();
React.useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current);
return () => observer.unobserve(domRef.current);
}, []);
return (
<div
className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
ref={domRef}
>
{props.children}
</div>
);
}
export default FadeInSection
我从这篇文章中找到了解决方案:
https://markoskon.com/scroll-reveal-animations-with-react-spring/
所以,我正在使用 react-spring 在滚动上创建显示动画,并使用 react-visibility-sensor 来查看我想要的动画元素是否可见。
// App.js
import React from "react";
import { Spring } from "react-spring/renderprops";
import VisibilitySensor from "react-visibility-sensor";
<VisibilitySensor once>
{({ isVisible }) => (
<Spring delay={100} to={{ opacity: isVisible ? 1 : 0 }}>
{({ opacity }) => <h1 style={{opacity}}>Title</h1>}
</Spring>
)}
</VisibilitySensor>
我一直在尝试使用 gatsby-plugin-scroll-reveal
,它使用 Sal.js 为我网站上的英雄部分制作动画。我正在努力使英雄中的文本在您向下滚动页面时淡入然后淡出。现在,我只能让它淡入。如何使用 Sal.js 或其他方式实现它?
我还尝试了另一种方法,创建了一个使用 IntersectionObserver DOM API 的组件,但我无法让它真正起作用。
组件如下:
import React from 'react';
import ReactDOM from 'react-dom';
function FadeInSection(props) {
const [isVisible, setVisible] = React.useState(true);
const domRef = React.useRef();
React.useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current);
return () => observer.unobserve(domRef.current);
}, []);
return (
<div
className={`fade-in-section ${isVisible ? 'is-visible' : ''}`}
ref={domRef}
>
{props.children}
</div>
);
}
export default FadeInSection
我从这篇文章中找到了解决方案: https://markoskon.com/scroll-reveal-animations-with-react-spring/
所以,我正在使用 react-spring 在滚动上创建显示动画,并使用 react-visibility-sensor 来查看我想要的动画元素是否可见。
// App.js
import React from "react";
import { Spring } from "react-spring/renderprops";
import VisibilitySensor from "react-visibility-sensor";
<VisibilitySensor once>
{({ isVisible }) => (
<Spring delay={100} to={{ opacity: isVisible ? 1 : 0 }}>
{({ opacity }) => <h1 style={{opacity}}>Title</h1>}
</Spring>
)}
</VisibilitySensor>