最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第十三堂 – Slide in on Scroll

XAMPP下载 admin 607浏览 0评论

今天實作要做的是一個瀏覽網頁時常見的一種特效,就是當你閱讀一篇很長的文章時,滾動頁面到有圖片的段落時,圖片才會從側邊淡入進來,讓人產生一種這個網頁很有質感的錯覺,實作範例如下。

QQ截图20181105162033

 

 邏輯流程
取得所有圖片element
監聽畫面捲動事件,觸發函式
函式判斷畫面位置與圖片位置,決定是否滑入圖片
課程重點
debounce:由於實作中監聽畫面捲動事件時,每捲一格其實會觸發超級多次函式,當函式複雜的時候是會影響效能的。因此debounce就是限制一個時間內,函式只會被呼叫一次。而教材中debounce的函式已經幫你寫好
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
window.scrollY:目前畫面上邊界的Y坐標值,越下面越大
window.innerHeight:目前畫面的長度
(element).offsetTop:該元素上邊界的Y坐標值
(element).height:該元素的長度
利用上面四個屬性,即可判斷圖片是否要滑入,實作是設定當圖片超過一半在畫面中才滑入。slideInAt是目前畫面下邊界的Y坐標,imageBottom是圖片下邊界的Y坐標,當slideInAt大於圖片上邊界+半張圖片長度時,isHalfShown為true。另外當往下滾動超過圖片時,圖片要變回隱藏,因此還要判斷有沒有滾超過,若畫面上邊界Y坐標小於圖片下邊界時,代表圖片還在畫面,isNotScrolledPast為true
const slideInAt = (window.scrollY + window.innerHeight);
const imageBottom = sliderImage.offsetTop + sliderImage.height;
const isHalfShown = slideInAt > sliderImage.offsetTop + sliderImage.height / 2;
const isNotScrolledPast = window.scrollY < imageBottom;
if (isHalfShown && isNotScrolledPast) {
sliderImage.classList.add(‘active’);
} else {
sliderImage.classList.remove(‘active’);
}
延伸閱讀
實作中,function debounce(func, wait = 20, immediate = true)參數帶入值代表預設,因此若要使用預設參數,只需debounce(func)這樣呼叫即可。若要改變參數就正常給參數,如debounce(func,100)。若只要給第三個參數就debounce(func,undefined,false)

转载请注明:XAMPP中文组官网 » 第十三堂 – Slide in on Scroll

您必须 登录 才能发表评论!