CODEWITHSUNDEEP
javascripthtmlcss
Asher
Asher

Reputation: 80

Slider animation in a loop

I created this text slider.

Right now it scrolls all the way back when reaches the end.

Is there a way to play it smoothly in a continuous loop without resetting to initial position?

let h = document.querySelector("h1 > span > span").offsetHeight;
document.querySelector("h1 > span").style.height = h + "px";

let i = 0,
  t = document.querySelector("h1 > span").childElementCount;

setInterval(function() {
  i = i < t - 1 ? i + 1 : 0;
  document.querySelector("h1 > span > span").style.marginTop = -(h * i) + "px";
}, 1000);
h1 {
  display: flex;
  flex-wrap: wrap;
}

h1>span {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1>span>span {
  transition: all 0.2s ease-in;
}
<h1>
  We are&nbsp;
  <span>
    <span>Premium</span>
    <span>Transparent</span>
    <span>Focused</span>
  </span>
</h1>

Upvotes: 2

Views: 136

Answers (1)

kmoser
kmoser

Reputation: 9273

After a given scroll finishes, find the current topmost <span> (e.g. <span>Premium</span>), delete it, and move it to the bottom so the list now becomes:

<span>Transparent</span>
<span>Focused</span>
<span>Premium</span>

Then you can continue to just scroll to the "next" item (which is now "Transparent"). In other words, you're always scrolling up to the topmost item.

var counter = 0;
setInterval(function() {
    if ( ++counter > 1 ) { // Only want to swap places *after* 1st scroll:
        var elmt = document.querySelector('h1>span>span'); // 1st item
        var parent = elmt.parentNode; // Remember the parent container
        elmt.style.marginTop = ''; // reset it
        parent.removeChild(elmt); // Remove 1st child <span>
        parent.appendChild( elmt ); // Move 1st <span> to end of list
    }
    document.querySelector("h1 > span > span").style.marginTop = -(h) + "px";
}, 1000);

Upvotes: 3

Related Questions