使用CSS3制作平滑的慢滚动

基本上我有一个从左到右滚动的图像横幅。我使用jQuery（代码粘贴在下面）可以很好地工作，但它可以非常紧张，客户希望它更流畅。所以经过一番研究，最好的方法是使用CSS3（可能应该从这里开始）。除了border-radius这样的基础知识之外，我还没有使用过很多CSS3，所以不得不阅读。看到一些例子后，我可以尝试做滚动，但我无法让它与jQuery一起工作。使用CSS3制作平滑的慢滚动

预期的效果：

滚动缓慢地从右边到左边“永远”
当鼠标移动到它，它停止滚动

我这样做有以下的jQuery：

$(document).ready(function() { 
    var $scrollMe = $('.ScrollMe'); 

$scrollMe.hover(stopBannerAnimation) 
$scrollMe.mouseout(startBannerAnimation) 

function stopBannerAnimation() 
{ 
    $(this).stop(); 
} 

function startBannerAnimation() 
{ 
    /*if (Modernizr.csstransitions) 
    { 
     $scrollMe.css('left', '{xen:calc '{$scrollerWidth} * 100'}px'); 
    } 
    else*/ 
    { 
     $scrollMe.animate(
      {left: -{$scrollerWidth}}, 
      {xen:calc '{$scrollerWidth} * 60'}, 
      'linear', 
      function(){ 
       if ($(this).css('left') == '{$scrollerWidth}px') 
       { 
        $(this).css('left', 0); 
        startBannerAnimation(); 
       } 
      } 
     ); 
    } 
} 
startBannerAnimation(); 

$('.ScrollMe ol').clone().appendTo('.ScrollMe'); 
});

有人可以帮助我在使用CSS3处理实际滚动，所以它更平滑（理论上）？

来源

2012-03-11 Robbo

这是我怎么会做它，用5秒钟的动画速度：

第1步：写你的CSS3过渡类

.ScrollMe{ 
    -webkit-transition:left 5s ease; // here the animation is set on 5 seconds 
    -moz-transition:left 5s ease; // adjust to whatever value you want 
    -o-transition:left 5s ease; 
    transition:left 5s ease;} 
}

第2步：建立了jQuery来切换左位置

function DoAnimation() { 

    var $scrollMe = $('.ScrollMe'); 

    if ($scrollMe.offset().left === 0) { 
     // I imagine you calculate $scrollerWidth elsewhere in your code?? 
     $scrollMe.css('left', $scrollerWidth); 
    } else { 
     $scrollMe.css('left', 0); 
    } 

    setTimeout(function() { 
    if (LaunchAnimation === true) { DoAnimation(); } 
    }, 5000); // here also assuming 5 seconds; change as needed 

}

步骤3 ：控制动画的启动/停止

var LaunchAnimation = true; 

    $(document).ready(function() { 

     $('.ScrollMe').mouseover(function() { 
     //this stops the div from moving 
     if (LaunchAnimation === true) { 
      $(this).css('left', $(this).offset().left); 
      LaunchAnimation = false; 
     } 
     }); 

     $('.ScrollMe').mouseleave(function() { 
     DoAnimation();    
     LaunchAnimation = true; 
     }); 
}

这样，你让浏览器的CSS渲染引擎控制div为平滑的速度和运动，你使用jquery仅作为触发机制。

希望这会有所帮助。

来源

2012-03-11 22:53:32 frenchie

感谢队友今天晚些时候会试试这个 – Robbo 2012-03-12 19:10:33

你是否已经开始工作了？ – frenchie 2012-03-18 17:29:25

Nah这种方法似乎是由于浏览器的错误，我认为......甚至在工作时仍然有点紧张。能够妥协与客户使用不同的效果。 – Robbo 2012-04-17 10:15:28

使用CSS3制作平滑的慢滚动

回答

相关问题