如何使动画与页面滚动位置相对应,以便当用户滚动经过它时动画转到位置 A,而当用户的页面滚动位置超过它时,它转到位置 B?
这是我想要制作的模型:
(3个页面的轴心点由它们下方的蓝点表示。)
我找到了各种通过页面滚动(such as AOS 或 ScrollTrigger)触发一次的动画示例,或者可以多次重新触发的动画示例,但我还没有找到任何动画进度连接的示例到页面滚动位置。
也许可以通过修改一些现有示例来完成,但如果不行,我想我需要使用 the CSS animation property 来定制一些东西并以某种方式将其连接到页面滚动位置。
有什么想法可以实现吗?谢谢。
最佳答案
如果你使用 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("/image/HwX2l.png");
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>
也可以测试一下here
关于javascript - 页面滚动位置对应的CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54304293/