如何從左到右和從右到左動畫背景圖像

我希望使用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

來源

2017-03-07 Gopa

向我們展示你到現在 – 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>

來源

2017-03-07 13:18:37 Justinas

謝謝你的代碼。它幫助我實現了我正在尋找的東西。然而，在某個時間之後，如果平移變得更小，則動畫停止。我會在這裏貼上我的代碼（我用另一種形象與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>

來源

2017-03-07 14:19:37 HerrSerker

優秀！非常感謝你 – Gopa

如何從左到右和從右到左動畫背景圖像

回答

相關問題