如何在上下滚动时触发css动画
如何在上下滚动时触发css动画
提问于 2015-02-03 19:57:44
我在一个项目中使用了几个CSS动画。我的问题是，这些动画只有一次触发，当滚动下来。我需要他们被触发每次用户滚动他们，无论是向上或向下的页面。
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}HTML
<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>JavaScript
$(window).scroll(function() {
$('.animation-test').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideRight");
}
});
});
$('.element-to-hide').css('visibility', 'hidden');JSFiddle
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-03 20:26:18
像这样的东西应该管用。
工作实例
$(window).scroll(function () {
$('.animation-test').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).addClass("slideRight");
} else {
$(this).removeClass("slideRight");
}
});
});基本上，它只是使用一个if语句来查找元素是否在视图端口中，并添加和删除类。您可以使用以下方法切换元素的可见性：
.element-to-hide{
visibility:hidden;
}
.slideRight {
visibility: visible;
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28307625
复制相关文章
相似问题
腾讯云开发者
