网页动态文本效果：滚动触发的打字机动画实现指南

<div class="typewriter-container">
    <p class="typewriter-text">Hello, Web World!</p>
</div>

.typewriter-container {
    width: fit-content; /* 根据内容调整宽度 */
    margin: 20px auto;
    font-family: monospace;
    font-size: 2em;
}

.typewriter-text {
    overflow: hidden; /* 隐藏超出部分 */
    white-space: nowrap; /* 防止文本换行 */
    border-right: .15em solid orange; /* 模拟光标 */
    margin: 0 auto;
    letter-spacing: .1em; /* 字间距 */
    animation:
        typing 3.5s steps(20, end) forwards, /* 20个字符，逐字显示 */
        blink-caret .75s step-end infinite; /* 光标闪烁 */
}

/* 文本打字动画 */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

document.addEventListener('DOMContentLoaded', () => {
    const headerElement = document.querySelector('.u-header'); // 假设的头部元素
    const logoTextElement = document.querySelector('.u-logo__text'); // 假设的logo文本元素
    let isTopMode = true; // 初始状态：页面在顶部

    // 定义一个函数来更新头部和Logo文本的状态
    function updateHeaderState() {
        // 获取当前滚动位置
        const currentScrollY = window.scrollY;
        // 判断是否处于顶部模式
        const newIsTopMode = currentScrollY === 0;

        // 只有当模式发生改变时才执行DOM操作
        if (newIsTopMode !== isTopMode) {
            isTopMode = newIsTopMode; // 更新状态

            // 使用 requestAnimationFrame 优化动画和DOM操作
            window.requestAnimationFrame(() => {
                if (isTopMode) {
                    // 滚动到顶部时
                    headerElement.classList.remove('u-header--scrolled-down');
                    headerElement.classList.add('u-header--scrolled-top');
                    document.body.classList.remove('u-body--header-scrolled-down');
                    document.body.classList.add('u-body--header-scrolled-top');

                    // 恢复完整的Logo文本
                    if (logoTextElement) {
                        // 假设存在一个名为getLogoWriter的方法来设置文本
                        if (logoTextElement.getLogoWriter) {
                            logoTextElement.getLogoWriter().setText("axel springer");
                        } else {
                            // 如果没有自定义方法，直接修改textContent
                            logoTextElement.textContent = "axel springer";
                        }
                    }
                } else {
                    // 向下滚动时
                    headerElement.classList.add('u-header--scrolled-down');
                    headerElement.classList.remove('u-header--scrolled-top');
                    document.body.classList.add('u-body--header-scrolled-down');
                    document.body.classList.remove('u-body--header-scrolled-top');

                    // 缩短Logo文本
                    if (logoTextElement) {
                        if (logoTextElement.getLogoWriter) {
                            logoTextElement.getLogoWriter().setText("a");
                        } else {
                            logoTextElement.textContent = "a";
                        }
                    }
                }
            });
        }
    }

    // 监听滚动事件，并使用防抖优化性能
    let scrollTimeout;
    window.addEventListener('scroll', () => {
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        scrollTimeout = setTimeout(updateHeaderState, 100); // 100ms 防抖
    });

    // 页面加载时立即执行一次，确保初始状态正确
    updateHeaderState();
});