大家好！

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

樣式

[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，我們明天再見！