如何从左到右和从右到左动画背景图像

问题描述：

我希望使用jquery/javascript实现以下动画。我有一个宽度为2000px，高度为200px的图片。我想从左到右对图像进行动画处理，直到它到达一端，然后从右到左。这应该继续给全景。如何从左到右和从右到左动画背景图像

我在互联网上试过[下面的脚本] [1]，但它只能用于oneide。我想要一个平移效果。请咨询。谢谢

直接链接代码：http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js/js/autoBackgroundScroll.js

;(function(){ 
$.fn.autoBackgroundScroll = function(options) { 

    var opts = $.extend({}, $.fn.autoBackgroundScroll.defaults, options); 
    var $backslider = $(this); 


    var duration = opts.duration; 
    var speed = opts.speed; 
    var imageWidth = opts.imageWidth; 
    var imageHeight = opts.imageHeight; 
    var direction1 = opts.direction1; 
    var direction2 = opts.direction2; 


    var posX = 0; 
    var posY = 0; 


    scroll(duration, speed, direction1, direction2); 


    function scroll(duration, speed, direction1, direction2){ 
     setInterval(function(){ 
      if(direction1 == 'right'){ 
       moveRight(); 

       if(direction2 == 'top'){ 
        moveTop(); 
       } 

       if(direction2 == 'bottom'){ 
        moveBottom(); 
       } 

      } else if(direction1 == 'left'){ 
       moveLeft(); 

       if(direction2 == 'top'){ 
        moveTop(); 
       } 

       if(direction2 == 'bottom'){ 
        moveBottom(); 
       } 

      } else if(direction1 == 'bottom'){ 
       moveBottom(); 

       if(direction2 == 'right'){ 
        moveRight(); 
       } 

       if(direction2 == 'left'){ 
        moveLeft(); 
       } 

      } else if(direction1 == 'top'){ 
       moveTop(); 

       if(direction2 == 'right'){ 
        moveRight(); 
       } 

       if(direction2 == 'left'){ 
        moveLeft(); 
       } 

      } 

      $backslider.css('background-position', posX + 'px ' + posY + 'px'); 


      function moveTop(){ 
       if(posY <= -imageHeight){ 
        posY = 0; 
       } 
       posY -= speed; 
      } 


      function moveRight(){ 
       if(posX >= imageWidth){ 
        posX = 0; 
       } 
       posX += speed; 
      } 


      function moveBottom(){ 
       if(posY >= imageHeight){ 
        posY = 0; 
       } 
       posY += speed; 
      } 


      function moveLeft(){ 
       if(posX <= -imageWidth){ 
        posX = 0; 
       } 
       posX -= speed; 
      } 

     }, duration); 
    } 

} 

$.fn.autoBackgroundScroll.defaults = { 
    direction1: 'right', 
    direction2: '', 
    duration: 1, 
    speed: 0.5 
}; 

})(jQuery);

代码礼貌：http://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js.html

向我们展示你到现在 – CaptainHere

你可以做到这一点与CSS过渡什么样的代码 - 只需创建一个从变化的背景位置的转变0至100％ – eithed

@eithed'背景位置：100％0'将背景移出视图 – Justinas

答

简单的jQuery动画X和Y（我建议使用CSS过渡流畅的动画）的设置适当的background-position值：

$(document).ready(function() { 
 
    slide(); 
 

 
    setInterval(function() { 
 
    slide(); 
 
    }, 10000); 
 
}); 
 

 
function slide() { 
 
    $('body').css({ 
 
    'background-position': -2000 + $(window).width() + 'px 0' 
 
    }); 
 

 
    setTimeout(function() { 
 
    $('body').css({ 
 
     'background-position': '0 0' 
 
    }); 
 
    }, 5000); 
 
}

body { 
 
    background: url('http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js/img/background.jpg') no-repeat left top transparent; 
 
    transition: background-position 5000ms ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

谢谢你的代码。它帮助我实现了我正在寻找的东西。然而，在某个时间之后，如果平移变得更小，则动画停止。我会在这里贴上我的代码（我用另一种形象与3696px宽度 – Gopa

'代码' 'code' – Gopa

一段时间后动画宽度会减小。针对该问题的任何解决方法 – Gopa

答

我建议使用CSS动画

.bg { 
 
    background-image: url("https://dummyimage.com/1000x200/333/ccc.png"); 
 
    background-position-x: 50%; 
 
    animation-delay: 0s; 
 
    animation-duration: 10s; 
 
    animation-name: panoramic; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: ease-in-out; 
 
    animation-fill-mode: both; 
 
    width: 444px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
    border: 1px solid gold; 
 
    will-change: background-position-x; 
 
} 
 

 
@keyframes panoramic { 
 
    0% { 
 
    background-position-x: 0%; 
 
    } 
 
    50% { 
 
    background-position-x: 100%; 
 
    } 
 
    100% { 
 
    background-position-x: 0%; 
 
    } 
 
}

<div class="bg"></div>

优秀！非常感谢你 – Gopa

如何从左到右和从右到左动画背景图像

相关推荐