[英]Trigger animation on scroll down
Here i creat animation that turns from color to grayscale but i want it will start only when user will scroll down (as it's in my site with a lot of images and need to scroll down to get there) 在这里,我创建了一个从彩色变成灰度的动画,但是我希望它只有在用户向下滚动时才开始(因为它在我的网站上有很多图像,需要向下滚动才能到达该位置)
here is the fiddle example: http://jsfiddle.net/4tHWg/7/ 这是小提琴示例: http : //jsfiddle.net/4tHWg/7/
.box {
float: left;
position: relative;
width: 14.285714286%;
}
.boxInner img {
width: 100%;
display: block;
}
.boxInner img:hover {
-webkit-filter: grayscale(0%);
}
@-webkit-keyframes toGrayScale {
to {
-webkit-filter: grayscale(100%);
}
}
.box:nth-child(1) img {
-webkit-animation: toGrayScale 1s 0.5s forwards;
}
.box:nth-child(2) img {
-webkit-animation: toGrayScale 2s 1s forwards;
}
.box:nth-child(3) img {
-webkit-animation: toGrayScale 3s 1.5s forwards;
}
This should do the trick. 这应该可以解决问题。
$( window ).scroll(function() {
$(".box").each(function (index){
if (index == 1)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 1s 0.5s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 2s 1s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 3s 1.5s forwards');
}
});
If I understand correctly what you are looking to do, then you can handle scrolling with .scroll()
function. 如果我正确理解了您要做什么,则可以使用.scroll()
函数处理滚动。 Then trigger the animation if the windows .scrollTop()
reaches each .box
's offset().top
. 如果窗口.scrollTop()
到达每个.box
的offset().top
则触发动画。
$(window).scroll(function(){
var st = $(this).scrollTop();
$('.box').each(function(index, element){
if(st >= $(this).offset().top){
$(this).find('img').css({'-webkit-animation':'toGrayScale 1s 1s forwards'});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.