论标题的滚动效果

// 示例代码：使用requestAnimationFrame优化滚动动画
function smoothScroll(element, to, duration) {
    const start = element.scrollTop;
    const change = to - start;
    let currentTime = 0;
    const increment = 20;

    const animateScroll = () => {
        currentTime += increment;
        const val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if (currentTime < duration) {
            requestAnimationFrame(animateScroll);
        }
    };

    animateScroll();
};

Math.easeInOutQuad = (t, b, c, d) => {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
};

/* 示例代码：视差滚动效果 */
.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.layer-1 {
    background: url('image1.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: -2;
    transform: translateZ(-1px) scale(2);
}

.layer-2 {
    background: url('image2.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: -1;
    transform: translateZ(-0.5px) scale(1.5);
}

// 示例代码：无限滚动加载内容
window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
        loadMoreContent();
    }
});

function loadMoreContent() {
    fetch('https://api.example.com/data?page=' + nextPage)
        .then(response => response.json())
        .then(data => {
            appendDataToPage(data);
            nextPage++;
        });
}