CSS动画与页面滚动位置的对应关系

Question

CSS动画与页面滚动位置的对应关系

javascriptcssscrollcss-animations

6

如何使动画与页面滚动位置相对应，以便当用户滚过它时，动画到达A位置，当用户的页面滚动位置在其上方时，动画到达B位置？

这是我想制作的模型：

三个页面的中心点由它们下方的蓝色点表示。

我找到了许多滚动触发的动画示例（例如AOS或ScrollTrigger），或者可以多次重新触发，但我没有找到任何将动画进度与页面滚动位置相连接的示例。

也许可以通过修改一些现有的示例来完成，但如果不行，我想我需要使用CSS动画属性来自定义一些内容，并将其与页面滚动位置相连接。

有任何想法如何实现吗？谢谢。

- Mentalist

我认为你需要使用JavaScript来触发动画。 - Daniel Vafidis

@DanielVafidis 是的，我猜CSS单独无法实现这个功能。 - Mentalist

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nimitt Shah · Accepted Answer

如果您使用 jQuery 和 CSS3，则很容易实现它。您可以旋转页面并根据滚动位置计算旋转值。

下面是一个示例代码：

$(document).ready(function(){
 $(document).scroll(function(){
   var scollHeight = $(document).height(); 
    var maxRotate = 30;
    var rotateVal =  5 + (($(document).scrollTop()* maxRotate) / scollHeight);
    
    $("#page1").css("transform", "rotate("+(-rotateVal)+"deg)");
    $("#page3").css("transform", "rotate("+(rotateVal)+"deg)");
  });
});

body{
  background-color: rgb(252,252,230);
}
.page-container{
  position: fixed;
}
.page{
  background-color:white;
  border:2px solid lightgray;
  width:85px;
  height:120px;
  position:absolute;
  top:20px;
  left:40px;
  transform-origin:bottom center -30px;
  transition-duration: 0.3s;
}

#page1{
  transform: rotate(-5deg);
}
#page3{
  transform: rotate(5deg);
}
.data-container{
  position: absolute;
  right:30px;
}
.data{
  background-image: url("https://istack.dev59.com/HwX2l.webp");
  width:370px;
  height:283px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  <div class="page-container">
    <div class="page" id="page1"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
  </div>
  <div class="data-container">
    <div class="data" id="data1"></div>
    <div class="data" id="data2"></div>
    <div class="data" id="data3"></div>
  </div>
</div>

您可以在这里进行测试。