React：花式投资组合的滚动过渡

我在一个网站上看到了这个奇特的滚动效果，简直惊艳到我了。我琢磨着要不要重现一下，结果还算成功 :)

顺便说一句，一定要查看Ilya Kulbachny的这个作品集网站。

设置

运行以下命令来进行初始设置。

git clone https://github.com/holdmypotion/scroll-transition.git
cd scroll-transition
git checkout starter
yarn
yarn start

最终文件结构

heroSection.js

让我们从英雄部分开始。我们将使用它来framer-motion为滚动时的图像添加动画。

复制粘贴此代码src/components/heroSection.js

import React from 'react';
// 1.
import { motion, useViewportScroll, useTransform } from 'framer-motion';

import styles from '../styles/heroSection.module.css';
import heroImage from '../assets/images/5.jpeg';

export default function HeroSection({ offset = 1500 }) {
  // 2.
  const { scrollY } = useViewportScroll();
  // 3.
  const scale = useTransform(scrollY, [0, offset], [1, 5]);
  const opacity = useTransform(scrollY, [0, offset], [3, 0]);
  const moveDown = useTransform(scrollY, [0, offset], [0, -1000]);

  return (
    <>
      <div className={styles.imageContainer}>
        {/* 4. */}
        <motion.img
          src={heroImage}
          alt='Model'
          style={{
            opacity: opacity,
            scale: scale,
            y: moveDown,
          }}
        />
      </div>
      {/* 5. */}
      <div style={{ background: '#030303', height: `${offset}px` }}></div>
      <div style={{ background: '#030303', height: '80vh' }}></div>
    </>
  );
}

让我们分解一下：

这里我们从 framer motion 导入我们需要的所有 sass
1. motion：赋予普通 JSX 元素超能力（与 framer motion API 配合使用的额外道具）
2. useViewportScroll：可用于跟踪滚动的位置。
3. useTransform：可用于根据另一个变量的变化值来改变变量的值。（默认情况下：变化是线性的）
我们使用useViewportScroll钩子来获取垂直滚动距离（以像素为单位）
使用useTransform钩子改变 3 个变量的值，scale，opacity和moveDown基于scrollY
这里我们将动态值传递给styles运动组件的道具。
最后，我们添加一个空的 div，其高度等于我们设置的总滚动区域。这样我们就可以像上面imageContainer设置的那样滚动了。position: fixed

感谢您的阅读！

阅读我博客上的这篇文章，了解它的工作原理并获取源代码

文章来源：https://dev.to/holdmypotion/react-scroll-transition-for-fancy-portfolios-37fg