iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 13

[Day13] Slide In on Scroll

  • 分享至 

  • xImage
  •  

[Day13] Slide In on Scroll

捲軸滑動圖片出現的效果

需要用到的技巧與練習目標

  1. scroll
  2. 設計一個函式 每隔數秒在執行scroll
  3. scrollY | innerHeight
  4. offsetTop

scrollY

1 window.scrollwindow.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


上一篇
[Day11] Custom HTML5 Video Player
下一篇
[Day14] Object and Arrays - Reference VS Copy
系列文
JavaScript 30天 跟著一起做一遍!!!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言