视差滚动
前景与背景以不同速度滚动，创造三维景深感。向下滚动体验沉浸式叙事。
全屏叙事
每个内容区块占据完整视口，通过滚动或点击进入下一屏，最大化视觉冲击力。这种设计常见于产品展示与故事讲述页面。
多层视差
不同元素以不同速率移动：背景最慢(0.3x)，内容正常(1x)，浮动元素最快(1.2x)，创造丰富的空间层次。
⭐
🌍
/* 视差滚动核心实现 */
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
document.querySelectorAll('[data-speed]').forEach(el => {
const speed = parseFloat(el.dataset.speed);
el.style.transform = `translateY(${scrolled * speed}px)`;
});
});
/* 全屏区块 */
.fullscreen-section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
← 返回索引