50projects50days知识点-scroll-animation

示例网址：

https://50projects50days.com/projects/scroll-animation/

http://50projects.tc.cluski.top/50projects50days/scroll-animation/

效果：

思路：

将每个Content的div通过transform: translateX(400%)来进行移动，使得Content的div移除屏幕外。并且加上动画，从而就得到上述的效果。

Window.innerHeight

浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。

更多相关Window的内容，请参考链接：

Window - Web API 接口参考 | MDN (mozilla.org)

Element.getBoundingClientRect()

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

在例子中，通过获取viewport的高度和每个Content元素的bottom距离做比较，从而判断哪些Content元素可以显示在屏幕中

function checkBoxes() {
    // 获取Viewport的高度
    const triggerBottom = window.innerHeight

    boxes.forEach(box => {
        // 获取每个box，在viewport中的bottom
        const boxBottom = box.getBoundingClientRect().bottom

        // 进行比较，看是否需要再viewport中显示
        if(boxBottom < triggerBottom) {
            box.classList.add('show')
        } else {
            box.classList.remove('show')
        }
    })
}

addEventListener()

在例子中，为window添加了2中时间，分别是scroll和resize事件，这两个事件的处理function都是上述的checkBoxes。从而，在滚动和调整窗口大小的时候，可以调整显示的Content元素的数量。

所有事件的一览：

事件参考 | MDN (mozilla.org)