[JS作品]JS30系列13 – Slide in on Scroll 圖片隨屏幕滾動而滑入滑出的效果指南

 

作品網址：

Demo作品連結
JavaScript 30 作品目錄

 

主題目標

  • 隨著卷軸移動到中央，讓圖片動態顯示。

 

需求思考分析

  1. 獲取頁面中的所有圖片元素
  2. 滾動事件監聽
  3. 尺寸獲取及處理
  4. 滾動至指定區域的條件判斷

 

處理步驟

步驟 1.

  • 首先取得所有圖片 HTML ，並建立空的 Function checkSlide 與綁定 scroll 捲軸移動事件。

步驟 2.

  • 因為 scroll 每次觸發頻率過高，所以呼叫 debounce 來降低呼叫頻率，避免效能損耗
  • 針對所有圖片 HTML 進行 foreach 迴圈
  • 取得目前畫面所在的高度
  • 取得圖片所在的高度

步驟 3.

  • 依照上一步驟取得的高度位置，進行判斷，然後添加 active class驗證輸入的字符。
  • 此處方法是將每一個輸入的字符存入pressed數組，然後處理數組，使其呈現隊列的性質，也就是輸入一個字符時，會擠出原有的的字符，保證其最大長度始終為secretCode的長度。
  • 這樣做的目的是為了便於驗證暗號，只有完整無誤的輸入一次暗號時，才會觸發相應的效果。當然這只是其中一種處理辦法，也還有其他辦法。

特別技術、函式

<HTML>

<CSS>

<JavaScript>

WindowOrWorkerGlobalScope.clearTimeout()

清除 setTimeout 設定。

window.setTimeout

setTimeout()方法設置一個定時器，該定時器在定時器到期後執行一個函數或指定的一段代碼。

Function.prototype.apply()

apply() 方法會呼叫一個以 this 的代表值和一個陣列形式的值組(或是一個 array-like object )為參數的函式。

throttle() 與debounce()

1. 去抖動 debounce

模仿電器開關處理的方法，把多個訊號合併成一個訊號。讓一個函式在連續觸發時只執行一次。一個常見的用法是使用者連續輸入基本資訊後，才觸發事件處理器進行格式確認。

2. 函數節流 throttle

函數節流讓一個函數不要執行得太頻繁，也就是控制函數最高呼叫頻率，減少一些過快的呼叫來節流。一個常見的用法是減少 scroll 的觸發頻率，因為 scroll 常常綁定一些消耗資源的 render 的事件。

參考資料：

JS30紀錄 13-Slide in on Scroll： https://shunnien.github.io/2017/12/31/Javascript30days-13/

Js 30 day 中文指南：https://github.com/soyaine/JavaScript30

Tags:

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言