[英]Trigger animation on scroll down
在這里,我創建了一個從彩色變成灰度的動畫,但是我希望它只有在用戶向下滾動時才開始(因為它在我的網站上有很多圖像,需要向下滾動才能到達該位置)
這是小提琴示例: 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;
}
這應該可以解決問題。
$( 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');
}
});
如果我正確理解了您要做什么,則可以使用.scroll()
函數處理滾動。 如果窗口.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.