Tengo 3 elementos de la lista que estoy rotando hacia arriba cada 3 segundos. Lo estoy haciendo usando la propiedad transformY . El problema es que cuando llega al último elemento, retrocede, dando el efecto de comenzar todo de nuevo.
¿Cómo puedo hacer que este efecto parezca continuo/infinito si sigo girando hacia arriba incluso después del último elemento?
setInterval(function() { var currActiveItem = $('.list span').css('transform'); if (currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") { $('.list span').css('transform', 'translateY(-67px)'); } else if (currActiveItem == "matrix(1, 0, 0, 1, 0, -67)") { $('.list span').css('transform', 'translateY(-134px)'); } else { $('.list span').css('transform', 'translateY(0)'); } }, 3000); .transformed-z-0 { transform: translateZ(0); } .list { position: fixed; overflow: hidden; left: 0; width: 100%; height: 67px; } .list-item { display: block; height: 67px; transition: all 0.7s ease-in-out; transform: translateY(0); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <h1 class="transformed-z-0"> <span class="list"> <span class="list-item">1</span> <span class="list-item">2</span> <span class="list-item">3</span> </span> <br> Some more text </h1>Una forma de hacerlo puede ser:
var firstElem = $('.list span').first().clone(); $('.list').append(firstElem); setInterval(function(){ var currActiveItem = $('.list span').css('transform'); if(currActiveItem == "matrix(1, 0, 0, 1, 0, 0)") { $('.list span').removeClass('no-transition'); $('.list span').css('transform', 'translateY(-67px)'); }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -67)"){ $('.list span').css('transform', 'translateY(-134px)'); }else if(currActiveItem == "matrix(1, 0, 0, 1, 0, -134)"){ $('.list span').css('transform', 'translateY(-201px)'); }else { $('.list span').addClass('no-transition'); $('.list span').css('transform', 'translateY(0)'); } }, 3000); .transformed-z-0 { transform: translateZ(0); } .list { position: fixed; overflow: hidden; left: 0; width: 100%; height: 67px; } .list-item { display: block; height: 67px; transition: all 0.7s ease-in-out; transform: translateY(0); } .no-transition { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; } <h1 class="transformed-z-0"> <span class="list"> <span class="list-item">1</span> <span class="list-item">2</span> <span class="list-item">3</span> </span> <br> Some more text </h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>