Gatsby/React - исчезновение раздела при прокрутке?

Я пытался использовать 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

reactjs scroll gatsby onscroll animate-on-scroll
person taylor018    schedule 02.04.2020    source источник
comment
Я не знаком с этим плагином и Sal.js, но мне кажется, что это может быть проще сделать, используя useOnScreen хук React и немного CSS? codesandbox.io/s/y7kr0vll4v   -  person Albert Skibinski    schedule 03.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

Я нашел решение из этой статьи: 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>
person taylor018    schedule 03.04.2020