Infinite背景位置动画-JQuery

Question

您可以看到JS代码，例如

    $('#tile').css({backgroundPosition:'0px 0px'});
function infinite(){
        $('#tile').animate({backgroundPosition:"-5000px -2500px"},12000);
}
infinite();
setInterval(infinite,12000);

有人可以帮我吗？ thanks！

或您可以使用以下方式：

function infinite(){
    $('#tile').css({backgroundPosition:'0px 0px'}).animate({backgroundPosition:"-5000px -2500px"},12000, infinite);
}
infinite();

Answer 1

var animate = $('#element');
function loopbackground() {
    animate.css('background-position', '0px 0px');
    $({position_x: 0, position_y: 0}).animate({position_x: -5000, position_y: -2500}, {
        duration: 12000,
        easing: 'linear',
        step: function() {
            animate.css('background-position', this.position_x+'px '+this.position_y+'px');
        },
        complete: function() {
            loopbackground();
        }
    });
}
loopbackground();

观看工作演示：

http：//jsfiddle.net/kusg5mdg/

Answer 2

Edit.... 4年后，我回来了，将上述函数转换为更可重复使用的代码（因为为什么不呢？

可调用，jQuery名称空间函数：

$.fn.loopBackground = function(options = {}) {
  options = $.extend({
    x: 0,
    y: 0,
    duration: 300,
    easing: 'linear'
  }, options);

  var $this = $(this);

  function loop() {
    $this.css('background-position', '0px 0px');
    $({ x: 0, y: 0 }).animate({ x: options.x, y: options.y }, {
      duration: options.duration,
      easing: options.easing,
      step: function() {
        $this.css('background-position', this.x+'px '+this.y+'px');
      },
      complete: function() {
        loop();
      }
    })
  }

  loop();
};

usage：

---

$('#title').loopBackground({
  x: -5000,
  y: -2500,
  duration: 30000,
  easing: 'linear' // Optional https://jqueryui.com/easing/
});

工作示例：

Http：//jsfiddle.net/dmvpu06f/

您不需要JavaScript或jQuery.

使用CSS

创建无限的背景滚动效果：

.bg-marquee {
  height: var(--h);
  background: repeat-x var(--url) 50% / var(--w) auto;
  animation: bg-marquee var(--speed, 5s) infinite linear;
}

@keyframes bg-marquee {
  0%   { background-position: 0; }
  100% { background-position: calc(var(--w) * var(--dir, -1)); }
}

<div class="bg-marquee" style="--w:800px; --h:100px; --url:url(https://picsum.photos/id/70/800/300);"></div>
<div class="bg-marquee" style="--w:800px; --h:100px; --speed:8s; --dir:1; --url:url(https://picsum.photos/id/76/800/300);"></div>
<div class="bg-marquee" style="--w:800px; --h:100px; --speed:2s; --url:url(https://picsum.photos/id/71/800/300);"></div>

Answer 3