13 Slide in on Scroll

效果

效果图

Demo
Github

知识点

• translateX() 平移
• scale() 缩放
• window.scrollY 文档顶部滚动过的像素值
• window.innerHeight 文档可视部分高度，包括滚动条
• element.offsetTop 当前元素顶部相对于最近的定位元素的顶部距离
• element.height 当前元素的高度

思路

1. 获取页面中所有图片元素
2. 监听屏幕滚动事件
3. 当满足一定条件时，使图片移入或移出

笔记

我们这里需要在图片顶部露出浏览器底部一半的时候，开始移入图片，如下图所示：

图示

这里声明了两个常量用来记录图片处于移入状态的临界值：

// 当图片从底部露出一半时，其顶部到网页顶部距离
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2
// 图片底部到网页顶部距离
const imageBottom = sliderImage.offsetTop + sliderImage.height

然后用两个常量记录其状态：

// 已滑过图片的一半
const isHalfShown = slideInAt > sliderImage.offsetTop
// 未完全滑过图片
const isNotScrolledPast = window.scrollY < imageBottom 

最后，当满足所有条件时，移入或移出图片：

if (isHalfShown && isNotScrolledPast) {
  sliderImage.classList.add('active')
} 
else {
  sliderImage.classList.remove('active')
}