So animieren Sie ein Hintergrundbild von links nach rechts und von rechts nach links

Question

Ich möchte die folgende Animation mit jquery/javascript erreichen. Ich habe ein Bild mit der Breite 2000px und der Höhe 200px. Ich möchte das Bild von links nach rechts animieren, bis es ein Ende erreicht und dann von rechts nach links. Dies sollte weiterhin einen Panoramablick bieten.

Ich versuchte das [folgende Skript] [1] im Internet, aber es geht nur oneside. Ich möchte etwas wie einen Schwenkeffekt. Bitte um Rat. Danke

Direkter Link zum Code: 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); 

-Code mit freundlicher Genehmigung: http://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js.html

Answer 1

Einfache jQuery animieren Einstellung richtige background-position Werte für x und y (Ich schlage vor, mit Hilfe von CSS-Übergängen für flüssigere Animation):

$(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>

Answer 2

Ich würde CSS-Animation

.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>