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);
    }
})();