jquerycssanimationinfinite

Infinite Background Position Animation

I'm wondering how to make infinite animation on jQuery with a plugin "background position animation" I tried to implement setInterval(); but it didn't work, there's my jsfiddle demo.

You can see JS code like

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

Can anyone help me? Thanks!

Solution

  • You don't need JavaScript or jQuery.
    Use CSS to create an infinite background scroll effect:

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