Question

我试图在用户到达页面上的某个点时动画两个不同的图像。我实际上做到了，但唯一的问题是当你使用触控板时，你可以看到移动元素动画非常“慢”＃34;当你使用鼠标滚动页面时，它很好。我还尝试将队列动画设置为false，但这也没有帮助。

任何帮助都将不胜感激。

我的代码如下：

<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

Answer 1

在我看来，这是阻止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');
    }

在特定点滚动动画2个元素[速度问题]

1 个答案: