时间戳

首页 > 解决方案 > 在网站滚动的某个阶段，如何使图像滑入屏幕并滑出？

javascript - 在网站滚动的某个阶段，如何使图像滑入屏幕并滑出？

问题描述

我见过许多网站在您向下滚动网站时引入了一个不错的功能，并且在网站滚动的某个部分突然出现，比如说在屏幕全页的 40% 到 70% 期间，图像会从左侧或右侧出现侧边并坐在屏幕中间，直到用户向上/向下滚动到足以使图像向外滑动为止。

我怎么能实现这样的功能？

标签： javascripthtmlcss

解决方案

好吧，这里有一些指针：

  • 检测并处理滚动事件：window.addEventListener("scroll", function(event){ ... });

  • 获取当前滚动位置：（window.scrollY || document.documentElement.scrollTop您可能会将其与另一个值进行比较）：

    window.addEventListener("scroll", function(event){

    var position = window.scrollY || document.documentElement.scrollTop;

    if(position > ...)
        ...
    ...
});

  • 可能你想用一个库，找“滚动动画（js，库）”，有很多

推荐阅读