iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 37

JS 37 - 滾動網頁即自動浮現元素

大家好!

今天要實作網頁滾動到特定位置時,自動浮現元素的效果。
我們進入今天的主題吧!


樣式

[data-revealing] {
    opacity: 0;
}

[data-revealing~="float-in"][data-revealing~="top"] {
    transform: translateY(-50%);
}

[data-revealing~="float-in"][data-revealing~="bottom"] {
    transform: translateY(50%);
}

[data-revealed][data-revealing~="float-in"] {
    opacity: 1;
    transform: translate(0);
    transition: opacity 1s cubic-bezier(0.25, 0.5, 0.5, 1),
                transform 1s cubic-bezier(0.25, 0.5, 0.5, 1);
}

程式碼

(function () {
    Felix(window).on('load', reveal);
    Felix(window).on('scroll', reveal);
    Felix(window).on('resize', reveal);
    function reveal() {
        const els = Felix('[data-revealing]:not([data-revealed])');
        Felix.forEach(els, function (el) {
            const pos = el.getBoundingClientRect().top;
            const params = el.dataset.revealing.split(' ');
            if (window.pageYOffset + innerHeight > elementPosition) {
                setTimeout(function (element) {
                    element.setAttribute('data-revealed', '');
                }, 750 + (parseInt(paremeters[2]) || 0), elements[i]);
            }
        });
        if (Felix('[data-revealing][data-revealed]').length < els.length) return;
        Felix(window).off('load', reveal);
        Felix(window).off('scroll', reveal);
        Felix(window).off('resize', reveal);
    }
})();

實測

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 36 - 新增並記錄網頁的偏好顏色模式
下一篇
JS 38 - 實作 Tab 頁籤
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言