動畫滾動在某個點上的2個元素[速度問題]

我試圖讓用戶到達頁面上的某個點時動畫兩個不同的圖像。我確實這樣做了，但唯一的問題是當您使用觸控板時，您可以看到移動元素動畫非常「慢」，而使用鼠標滾動頁面時它很好。我也嘗試將隊列動畫設置爲false，但這也沒有幫助。動畫滾動在某個點上的2個元素[速度問題]

任何幫助，將不勝感激。

我的代碼如下：

<div class="logo-cnt"> 
    <div class="logo-glyph"> 
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=50%C3%9750&w=50&h=50"> 
    </div> 
    <div class="logo-typeface"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=120%C3%9750&w=120&h=50"> 
    </div> 
</div> 

<div class="lq"> 

</div>

的jQuery：

var position = $('.lq').offset().top; 
$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if(y > position){ 
     $(".logo-typeface").stop().animate({right:50, opacity:0}, 100, "linear"); 
     $(".logo-glyph").stop().animate({left:63}, 100); 
    }else{ 
     $(".logo-typeface").stop().animate({right:0, opacity:1}, 100, "linear"); 
     $(".logo-glyph").stop().animate({left:0}, 100);  
     } 
});

看到現場版的在這裏JSFIDDLE

來源

2015-07-21 Amir

對於沒有觸控板的用戶 - 當鼠標左鍵單擊滾動條進行滾動時，就會出現該行爲。 –

@ DevinH.i只需要在所有體驗上保持一致。 – Amir

是的，補充說，那些沒有觸控板的人可以重現這個問題，這樣他們就可以有希望找到答案。 –

在我看來這是瀏覽器攔截JavaScript執行，同時滾動是在行動中。因此，對於一個鼠標，因爲它以一定的間隔滾動（每移動一個滾動位置移動10個），它並不明顯。但是對於觸控板，滾動的粒子更細。

我想出的解決方案是使用CSS動畫代替Javascript，因爲這些不會被阻止。

http://jsfiddle.net/mkvz6uwu/1/

@keyframes logo-typeface-move-left { 
    from {right: 0; opacity: 1;} 
    to {right: 50px; opacity: 0;} 
} 

@keyframes logo-typeface-move-right { 
    from {right: 50px; opacity: 0;} 
    to {right: 0; opacity: 1;} 
} 

.logo-typeface-move-left { 
    opacity: 0; 
    right: 50px; 
    animation-name: logo-typeface-move-left; 
    animation-duration: .5s; 
} 

.logo-typeface-move-right { 
    opacity: 1; 
    right: 0; 
    animation-name: logo-typeface-move-right; 
    animation-duration: .5s; 
} 

@keyframes logo-glyph-move-right { 
    from {left: 0;} 
    to {left: 63px;} 
} 

@keyframes logo-glyph-move-left { 
    from {left: 63px;} 
    to {left: 0;} 
} 

.logo-glyph-move-right { 
    left: 63px; 
    animation-name: logo-glyph-move-right; 
    animation-duration: .5s; 
} 

.logo-glyph-move-left { 
    left: 0; 
    animation-name: logo-glyph-move-left; 
    animation-duration: .5s; 
}

然後添加/使用如前使用相同的邏輯的jQuery除去類。

if (y > position) { 
     $(".logo-typeface").removeClass('logo-typeface-move-right').addClass('logo-typeface-move-left'); 
     $(".logo-glyph").removeClass('logo-glyph-move-left').addClass('logo-glyph-move-right'); 
    } else { 
     $(".logo-typeface").removeClass('logo-typeface-move-left').addClass('logo-typeface-move-right'); 
     $(".logo-glyph").removeClass('logo-glyph-move-right').addClass('logo-glyph-move-left'); 
    }

來源

2015-07-21 15:54:14

動畫滾動在某個點上的2個元素[速度問題]

回答

相關問題