- 首先,我在使用
jquery
为滚动时的这些box
元素设置动画时遇到了一些麻烦。我希望我的动画
在我滚动到section
的 1/4 时开始。- 其次,我的
box
div 曾经是垂直居中的,但在过渡期间添加了@keyframes
后,它们不再居中。如果您删除animation-fill-mode: forwards
,您可以看到它们如何在过渡结束时返回。 - 还有最后一个问题。当我开始滚动时,是否可以使用
jquery
为这两个框设置动画,而不必为每个部分
编写不同的代码?我在想,如果我将一些通用类添加到我的box
div 应该可以工作,对吧?
- 其次,我的
最初,在我的 jquery
文件中,我尝试在 box
上设置一个带有 opacity:0
的 hidden
类> div,当我开始滚动时,它会变成一个带有 opacity:1
的 showing
类。但效果并不理想。
在 YouTube 上找到的其他解决方案也没有帮助。将其他人的代码与我的代码混合似乎效果不佳。
如您所见,没有 jquery
代码,因为在我的大脑开始处理它之后它变得一团糟,有一次我认为我应该重新开始。
Here是我的 Codepen 的链接。
Jade
.landing-page
.section-one
.box-one
.section-two
.box-two
SASS
@mixin box()
position: absolute
width: 200px
height: 200px
background: black
.landing-page
height: 100vh
width: 100vw
background: gray
.section-one
position: relative
height: 100vh
width: 100vw
background: lightblue
.box-one
@include box()
top: 50%
right: 10%
transform: translate(-50%,-50%)
animation-name: box-one-animation
animation-duration: 2s
animation-fill-mode: forwards
.section-two
position: relative
height: 100vh
width: 100vw
background: lightgreen
.box-two
@include box()
top: 50%
left: 10%
transform: translate(-50%,-50%)
animation-name: box-two-animation
animation-duration: 2s
animation-fill-mode: forwards
@keyframes box-one-animation
0%
transform: translateX(0)
100%
transform: translateX(-50%)
@keyframes box-two-animation
0%
transform: translateX(0)
100%
transform: translateX(50%)
最佳答案
首先,您需要为滚动事件设置一些事件监听器,这样您就可以根据 scrollPos 或元素偏移到顶部来触发动画。
这是事件监听器:
https://developer.mozilla.org/en-US/docs/Web/Events/scroll
var last_known_scroll_position = 0;
var ticking = false;
function doSomething(scroll_pos) {
// do something with the scroll position
console.log(scroll_pos);
if(scroll_pos > 200){
console.log(document.getElementsByClassName('box-one')[0].classList);
document.getElementsByClassName('box-one')[0].classList.add('animate-me');
}
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});
查看 doSomething
函数,您可以在此处定义偏移量或决定整体方法。对于此的 css 部分,只需弹出一个引用您的动画以触发动画的类。
笔在这里:https://codepen.io/cidicles/pen/gzWwEz
有很多很棒的库可以为您制作这些类型的动画,例如 Scroll Magic 或 Skrollr,但构建您自己的库总是更有趣:p。
关于jquery - 如何使用 Jquery 在滚动时触发 CSS @keyframe 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50122402/