基于滚动位置的增量 CSS 动画

Posted 2023-05-08

【中文标题】基于滚动位置的增量 CSS 动画

【英文标题】：Incremental CSS animation based on scroll position

【发布时间】：2021-02-24 07:15:51

【问题描述】：

我使用下面的代码根据窗口滚动位置逐步播放暂停的 CSS 动画。

我现在遇到的问题是，一旦我开始滚动，所有暂停的动画都会同时触发。我希望每个动画仅在其父 div 进入视口时开始。

知道我该怎么做吗？提前致谢。

window.addEventListener("scroll", () => 
  document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
, false);

 

.quest_con 
  height: 100vh;
 
.quest 
  animation: slide_down .5s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1.5s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0;


@keyframes slide_down 
  0% 
    opacity: 0;
  
  50% 
    transform: translate(0, -350px);
  
  80% 
    opacity: 0;
  
  100% 
    transform: translate(0, 0);
    opacity: 1;
  

    <div class="col-12 quest_con quest_con_1">
       <i class="fas fa-question quest text_xxl color_2"></i>
       <i class="fas fa-running text_xl color_2"></i>
    </div>

    <div class="col-12 quest_con quest_con_2">
       <i class="fas fa-question quest text_xxl color_2"></i>
    </div>

    <div class="col-12 quest_con quest_con_2">
       <i class="fas fa-question quest text_xxl color_2"></i>
    </div>

【问题讨论】：

@RoryMcCrossan 我刚刚做了。谢谢。

【参考方案1】：

您可以使用 IntersectionObserver API 轻松存档。你可以看看 MDN 文档：MDN - IntersectionObserver API IntersectionObserver 管理元素的所有“In View”状态。