[Day13] Slide In on Scroll

[Day13] Slide In on Scroll

卷轴滑动图片出现的效果

需要用到的技巧与练习目标

1. scroll
2. 设计一个函式 每隔数秒在执行scroll
3. scrollY | innerHeight
4. offsetTop

scrollY

1 window.scroll 及 window.pageYOffset 功能相同，为卷轴滚动过的像素（卷轴离 轨道的起点的距离）
2. window.pageYOffset相容性比scrollY 要好一点，但IE(<9)以下两这皆不兼容。

innerHeight

Window.innerHeight 为浏览器视窗的高度，若有卷轴，则包括卷轴高度。

offsetTop

element.offset 回传元素 (element) 与亲代元素顶部上边的边距。

参考资料来源:
1.https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY
2.https://www.796t.com/post/NWwwM2c=.html
3.https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerHeight
4.https://developer.mozilla.org/zh-TW/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
5. https://javascript.info/size-and-scroll
6.https://shubo.io/element-size-scrolling/
7.https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop