如何实现div变化时字号视差效果 减小首div字号增大第二个div字号

调整方案 #

你要实现两个div滚动时的字号视差效果，可按以下步骤修改代码：

1. 先修正现有CSS的基础错误

• 原代码中top1选择器缺少标识，类选择器需加前缀.、ID选择器需加前缀#，否则规则不生效
• backdrop-filter: blur(8 px)中的空格需要删除，改为blur(8px)，否则属性不生效

2. 纯CSS实现视差效果（主流现代浏览器支持）
   使用CSS滚动驱动动画实现字号随滚动动态变化，无需额外JS：

/* 滚动容器配置，若你的滚动容器是其他元素替换body即可 */
body {
  timeline-scope: --scroll;
  overflow-y: auto;
}

/* 第一个div，假设是类选择器.top1 */
.top1 { 
  transform: translateX(-7em);
  font-size: 1.2em !important;
  /* 新增字号缩小动画 */
  animation: sizeDown linear both;
  animation-timeline: --scroll;
  animation-range: entry 10% cover 30%;
}

@keyframes sizeDown {
  to {
    /* 可按需调整最终缩小后的字号 */
    font-size: 0.5em;
  }
}

/* 第二个div */
#txt{
  margin: 10px;
  border-radius: 9px;
  backdrop-filter: blur(8px) saturate(171%);
  -webkit-backdrop-filter: blur(5px) saturate(171%);
  border: 1px solid ;
  border-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) rgba(34, 136, 156, 0.7) rgba(34, 136, 156, 0.7);
  box-shadow: 0px 0px 12px 2px rgb(135, 167, 185);
  -webkit-box-shadow: 0px 0px 12px 2px rgb(182, 145, 158);
  -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,1);
  background:rgba(238, 221, 221, 0.85);
  padding: .5em 1em ;
  color: rebeccapurple;
  font-size: .7em;
  /* 新增字号增大动画 */
  animation: sizeUp linear both;
  animation-timeline: --scroll;
  animation-range: entry 10% cover 30%;
}

@keyframes sizeUp {
  to {
    /* 可按需调整最终增大后的字号 */
    font-size: 1.4em;
  }
}

3. 兼容旧浏览器的JS实现方案
   如果需要适配不支持CSS滚动驱动动画的浏览器，可添加以下JS代码实现相同效果：

window.addEventListener('scroll', () => {
  // 计算当前滚动进度百分比
  const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  // 第一个div字号从1.2em线性缩小到0.5em，数值可自行调整
  document.querySelector('.top1').style.fontSize = `${1.2 - 0.7 * scrollPercent}em`;
  // 第二个div字号从0.7em线性增大到1.4em，数值可自行调整
  document.querySelector('#txt').style.fontSize = `${0.7 + 0.7 * scrollPercent}em`;
})

内容的提问来源于stack exchange，提问作者Ashutosh Kumar