javascript - 滚动时重叠图像动画效果

Question

我受到了创作这种动画效果的启发。我想要实现的是，向下滚动时重叠的图像会变大一点，然后当我向后滚动时会再次变小。
对于滚动部分，我知道我需要使用 Intersection Observer API。我想我设法让它做对了，但我不能让它工作。我使用带有内联样式的 React Typescript。
原动画 - Three overlaping images - 向下滚动时变大:
Codepen
我的 react 代码 - 重叠图像.tsx :

import React from 'react';

const styles = {
    container: {
        position: 'relative',
        height: '400px',
        margin: '0 50px',

        div: {
            width: '380px',
            border: '1px solid #000',
            overflow: 'hidden',
            lineHeight: 0,
            transition: 'transform .4s ease-in-out',

            img: {
                width: '100%',
                fontSize: 0,
            },
        },

        img1: {
            left: '5%',
            top: 0,
            position: 'absolute',
            transform: 'rotate(-4deg) translateY(20%)',
            transitionDelay: '0s',
        },

        img2: {
            left: '50%',
            top: 0,
            position: 'absolute',
            transform: 'translate(-50%, 0)',
            transitionDelay: '.1s',
            zIndex: 1,
        },

        img3: {
            right: '5%',
            top: 0,
            position: 'absolute',
            transform: 'rotate(4deg) translateY(20%)',
            transitionDelay: '.2s',
        },

        ' &.active': {
            img1: {
                transform: 'rotate(-6deg) translateY(50%) scale(1.9)',
            },

            img2: {
                transform: 'translate(-50%, -2%) scale(1.2)',
            },

            img3: {
                transform: 'rotate(6deg) translateY(24%) scale(1.2)',
            },
        },
    },

    body: {
        fontFamily: 'sans-serif',
        fontSize: '48px',
        fontWeight: 'bold',
        letterSpacing: '1px',
        margin: 0,
    },

    section: {
        textAlign: 'center',
        padding: '500px 0',

        '&:nth-child(odd)': {
            background: '#eee',
        },
    },
};

function OverlappingImages() {
    const wrapper = document.querySelector('.container');
    const className = 'active';

    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    wrapper.classList.add(className);
                    return;
                }

                wrapper.classList.remove(className);
            });
        },
        {
            threshold: 1,
        }
    );

    observer.observe(wrapper);

    return (
        <>
            <section>
                <p>(scroll down!)</p>
            </section>
            <section>
                <div style={styles.container}>
                    <div style={styles.container.img1}>
                        <img src="https://via.placeholder.com/350x250" alt="img1" />
                    </div>
                    <div style={styles.container.img2}>
                        <img src="https://via.placeholder.com/350x250" alt="img2" />
                    </div>
                    <div style={styles.container.img3}>
                        <img src="https://via.placeholder.com/350x250" alt="img3" />
                    </div>
                </div>
            </section>
            <section>
                <p>(scroll up!)</p>
            </section>
        </>
    );
}

export { OverlappingImages };

Answer 1

结果如下:

您需要将代码包装在 reutrn() 之上，进入window.onload因为如果你以你现在的方式运行它，document.querySelector('.container')只会返回 null或 undefined

您的容器没有类或 ID，并且您尝试使用 document.querySelector('.container') 访问它你会再次得到 null

Make sure you assign an id or a class to it

样式.css

#container * {
  transition: all .5s ease;
}
.active  div:nth-child(1) {
  transform: rotate(-4deg) translateY(20%) scale(1.1) !important;
}
.active  div:nth-child(2) {
  transform: translate(-50%, 0%) scale(1.1) !important;
}
.active  div:nth-child(3) {
  transform: rotate(4deg) translateY(20%) scale(1.1) !important;
}

重叠图像.tsx

const styles = {
  container: {
    position: "relative",
    height: "400px",
    margin: "0 50px",
    padding: "30px",
    transition: "all .5s ease",

    img1: {
      left: "5%",
      top: 0,
      position: "absolute",
      transform: "rotate(-4deg) translateY(20%)",
      transitionDelay: "0s",
    },

    img2: {
      left: "50%",
      top: 0,
      position: "absolute",
      transform: "translate(-50%, 0)",
      transitionDelay: ".1s",
      zIndex: 1,
    },

    img3: {
      right: "5%",
      top: 0,
      position: "absolute",
      transform: "rotate(4deg) translateY(20%)",
      transitionDelay: ".2s",
    },
  },

  whiteSpace: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "100vh",
  },
};

function OverlappingImages() {
  window.onload = function () {
    const wrapper = document.querySelector("#container");
    const className = "active";

    let preY = 0, preR = 0;
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(e => {
          const currentY = e.boundingClientRect.y;
          const currentR = e.intersectionRatio;

          if (currentY < preY || e.isIntersecting) {
            wrapper?.classList.add(className);
          } else if (currentY > preY && currentR < preR) {
            wrapper?.classList.remove(className);
          }

          preY = currentY;
          preR = currentR;
        });
      },
      { threshold: 0.8 }
    );
    observer.observe(wrapper);
  };

  return (
    <>
      <section>
        <div style={styles.whiteSpace}>
          <p>(scroll down!)</p>
        </div>
      </section>
      <section>
        <div style={styles.container} id="container">
          <div style={styles.container.img1}>
            <img src="https://via.placeholder.com/350x250" alt="img1" />
          </div>
          <div style={styles.container.img2}>
            <img src="https://via.placeholder.com/350x250" alt="img2" />
          </div>
          <div style={styles.container.img3}>
            <img src="https://via.placeholder.com/350x250" alt="img3" />
          </div>
        </div>
      </section>
      <section>
        <div style={styles.whiteSpace}>
          <p>(scroll up!)</p>
        </div>
      </section>
    </>
  );
}

export default OverlappingImages;

第二种方法(使用引用)

样式.css

.active div:nth-child(1) {
  transform: rotate(-4deg) translateY(20%) scale(1.1) !important;
}
.active div:nth-child(2) {
  transform: translate(-50%, 0%) scale(1.1) !important;
}
.active div:nth-child(3) {
  transform: rotate(4deg) translateY(20%) scale(1.1) !important;
}

重叠图像.tsx

import {useRef, useEffect} from 'react';
const styles = {
  container: {
    position: "relative",
    height: "400px",
    margin: "0 50px",
    padding: "30px",

    img1: {
      left: "5%",
      top: 0,
      position: "absolute",
      transform: "rotate(-4deg) translateY(20%)",
      transition: "all .5s ease",
    },

    img2: {
      left: "50%",
      top: 0,
      position: "absolute",
      transform: "translate(-50%, 0)",
      transition: "all .5s ease .1s",
      zIndex: 1,
    },

    img3: {
      right: "5%",
      top: 0,
      position: "absolute",
      transform: "rotate(4deg) translateY(20%)",
      transition: "all .5s ease .2s",
    },
  },

  whiteSpace: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    height: "100vh",
  },
};

function OverlappingImages() {
  const ref = useRef(null);

  useEffect(()=>{
    const wrapper = ref.current;
    const className = "active";

    let preY = 0, preR = 0;
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(e => {
          const currentY = e.boundingClientRect.y;
          const currentR = e.intersectionRatio;

          if (currentY < preY || e.isIntersecting) {
            wrapper?.classList.add(className);
          } else if (currentY > preY && currentR < preR) {
            wrapper?.classList.remove(className);
          }

          preY = currentY;
          preR = currentR;
        });
      },
      { threshold: 0.8 }
    );
    observer.observe(wrapper);
  },[])
    

  return (
    <>
      <section>
        <div style={styles.whiteSpace}>
          <p>(scroll down!)</p>
        </div>
      </section>
      <section>
        <div ref={ref} style={styles.container}>
          <div style={styles.container.img1}>
            <img src="https://via.placeholder.com/350x250" alt="img1" />
          </div>
          <div style={styles.container.img2}>
            <img src="https://via.placeholder.com/350x250" alt="img2" />
          </div>
          <div style={styles.container.img3}>
            <img src="https://via.placeholder.com/350x250" alt="img3" />
          </div>
        </div>
      </section>
      <section>
        <div style={styles.whiteSpace}>
          <p>(scroll up!)</p>
        </div>
      </section>
    </>
  );
}

export default OverlappingImages;