js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来

本文主要是介绍js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html代码

<div ref={test} id="animatedElement" className="not-animated">
        <div style={{width:"100px",height:"50px",backgroundColor:"red"}}>
        </div>
</div>

JS代码

const test = useRef(null)
  // 监听滚轮事件
  useEffect(() => {
    const handleScrollaa = () => {
      const scrollTop1 = document.documentElement.scrollTop || document.body.scrollTop;
      const h = test.current;
      const triggerPoint = window.innerHeight
      if (scrollTop1 > triggerPoint * 0.3) {
        // 触发动画，通过添加 animate 类
        console.log(32135456434687)

       (headerLogo2 as HTMLElement).style.animation = `ROW3 2s forwards`;
      }
      else if(scrollTop1 < triggerPoint * 0.3){
        h.style.animation=""
        h.style.opacity="0"
      }
    };

    window.addEventListener('scroll', handleScrollaa);
    // 组件卸载时移除事件监听器
    return () => {
      window.removeEventListener('scroll', handleScrollaa);
    };
  }, []);

CSS代码（实现从左到右滑动出来，并且由模糊到清楚的展现）

@keyframes ROW3 {
  0% {
    transform: translateX(-100%); /* 动画开始时，图片在容器外部 */
    filter: blur(30px);  /*模糊属性*/
    opacity:0; /*opacity: 0 隐藏  1 显示 */
  }
  100% {
    transform: translateX(0) rotate(1turn) ; /* 动画结束时，图片移动到容器内部 rotate(1turn)是内容旋转，随着移动而滚动 */
    filter: blur(0);
    opacity:1;
  }}

这篇关于js实现元素根据鼠标滚轮滚动向左右上下滑动着从模糊到清楚显示出来的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---