随滚动条移动实现的动画效果

首先贴出代码先

// onscroll事件 window.onscroll = function(e) { var show = document.getElementById("showp");

// 获取浏览器窗口可视化高度

var clientH = window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight;

// 获取showp元素顶部到浏览器窗口顶部的距离

var showTop = show.getBoundingClientRect().top;

// 如果距离小于可视化窗口高度，就给showp元素添加动画效果

let x = ((clientH-showTop)*1)/350;     //此处举个栗子

if (showTop <= clientH) {

      showp.style.opacity = `${x}`;

      showp.style.transform = `translateX(-${(1-x)*100}%)`;

   }

};