如何在页面滚动到特定位置时实现div透明度的渐变效果？-灵析社区
一一在debug求问，有没有懂页面到一定位置透明度渐显div的全代码 只能做出一半，就是到一定位置div渐显，但是并不会改JS动画，div是先存在再从0-100透明
我是张工你呢刚好项目用到了 分享你一下
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241005/49236339745ae9a2d2ad10dee93b9154.png)
import React, { useEffect, useRef, useState } from 'react';
/** 根据某个元素滚动的底部距离顶部的距离， 更改 蒙层 透明度的 动画 */
const useCustomMaskOpacityAnimation = () => {
// 创建一个引用来保存 监听某个元素滚动的底部距离顶部的距离 DOM 元素
const scrollElementRef = useRef(null);
// 创建一个状态来保存透明度
const [maskOpacity, setMaskOpacity] = useState(0);
useEffect(() => {
// 获取特定元素
const element = scrollElementRef.current;
// 定义一个函数来处理滚动事件
const handleScroll = () => {
if (element) {
// 计算元素的底部距离顶部的距离
const elementBottom = element.getBoundingClientRect().bottom;
const distanceFromTop = window.innerHeight - elementBottom;
// 设置透明度，距离顶部越远，透明度越高
const newOpacity = Math.min(1, distanceFromTop / window.innerHeight);
setMaskOpacity(newOpacity);
}
};
// 添加滚动事件监听器
window.addEventListener('scroll', handleScroll);
// 清除监听器的返回函数
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return { maskOpacity, scrollElementRef };
};
export default useCustomMaskOpacityAnimation;