javascript - 页面滚动位置对应的CSS动画
问题描述
如何使动画与页面滚动位置相对应,以便当用户滚动经过它时,动画会转到位置 A,而当用户的页面滚动位置超过它时,它会转到位置 B?
这是我想做的模型:
(这 3 个页面的轴心点由它们下方的蓝点表示。)
我找到了各种通过页面滚动触发一次的动画示例(例如 AOS或ScrollTrigger),或者可以多次重新触发,但我没有找到任何动画进度与页面滚动位置相关的示例.
也许可以通过修改一些现有示例来完成,但如果不是,我认为我需要使用CSS 动画属性来定制一些东西,并以某种方式将其连接到页面滚动位置。
有什么想法可以实现吗?谢谢。
解决方案
如果你使用 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://i.stack.imgur.com/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>
你也可以在这里测试
推荐阅读
- angular - 如果模板包含 *ngIf,Angular 自定义结构指令无法重建 ViewContainer
- android - I have updated flutter and android studio. now any new dependencies are not installing
- php - how to compare more than one column from two different tables of database and update, if it match the same record in laravel
- autodesk-forge - Do you need a BIM360 license to acces BIM360 files
- performance - Times Elapsed method seems missing in JMC 7 (in method profiling)
- java - Java Linked List - can't access data if its been viewed already
- angular - 在 RxJS 管道中捕获完成
- php - Icecast歌曲历史
- php - 狮身人面像错误:“搜索请求中的未知本地索引”消息“
- javascript - 如何为所有fabricjs对象添加属性?