如何在向下和向上滚动时触发css动画 [英] How to Trigger css animation both on scrolling down and up

问题描述

我在一个项目上使用了几个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-hidestyle =visibility：visible;&某事< / div> 
  

JavaScript

  $（window）.scroll（function（）{
 $（'。animation-test'）每个函数（）{
 var imagePos = $（this） .top; 
 
 var topOfWindow = $（window）.scrollTop（）; 
 if（imagePos< topOfWindow + 400）{
 $（this）.addClass ）; 
} 
}）; 
}）; 
 $（'。element-to-hide'）。css（'visibility'，'hidden'）; 
  

JSFiddle

解决方案

工作示例

  $（window）.scroll（function（）{
 $（'。animation-test' $（this）.offset（）。top; 
 var imageHeight = $（this）.height（）; 
 var topOfWindow = $（window）.scrollTop（）; 
 $ b b if（imagePos< topOfWindow + imageHeight&& imagePos + imageHeight> topOfWindow）{
 $（this）.addClass（slideRight）; 
} else {
 $ this）.removeClass（slideRight）; 
} 
}）; 
}）; 
 

基本上，它只是使用一个if语句来查找元素是否在视图端口内，以及添加和删除班上。您可以使用以下命令切换元素的可见性：

  .element-to-hide {
 visibility： 
} 
 .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; 
} 
  




I'm using several CSS animations on a project. My problem is these animations get triggered only once, when scrolling down. I need them to be triggered every time the user scrolls by them, whether going up or down the page.

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

解决方案

Something like this should work.

Working Example

$(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");
        }
    });
});

Basically its just using an if statement to find whether the element is within the view port and adding and removing the class. You can toggle the visibility of the element by using:

.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; 
}

这篇关于如何在向下和向上滚动时触发css动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！