一个问题,我见过一些网站,当您向下滚动页面并显示一些元素时,这些元素开始修改它的大小和位置等属性。当您再次向上滚动时,这些元素将返回到它们原来的大小和位置。
当元素显示在屏幕上时,有什么方法可以修改 css 属性?
最佳答案
This youtube tutorial may help you out.
This project will give you the code you need.
下面,一个例子。
.animation1 {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
.animation2 {
width: 100px;
height: 100px;
background-color: red;
}
.space{
height:150vh;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<div class="animation1"></div>
<div class="space"></div>
<div class="animation2" data-aos="fade-up"
data-aos-anchor-placement="center-bottom"
data-aos-duration="2000">
</div>
<script>
AOS.init();
</script>
关于javascript - 如何在一个元素出现在屏幕上后立即更改它的 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63733181/