Use jQuery to implement list loop scrolling tips

See a good idea, record it

I used jQuery to do the scrolling effect before, and I wrote in these two articles: Wen 1 and Wen 2 , which used scrollLeft(), scrollTop(), scroll() respectively to achieve

Later, when I saw a demo, I thought the idea was very good. I thought that it could be used to scroll the list content items. The effect is probably like this:
insert image description here

The idea is this:
as long as you can keep moving the first item to the end, the rest will automatically fill up the vacancy, and the filling process will be slowed down with animation, and you can have a continuous scrolling visual effect (the array is deleted The first element, and adding this element at the end is equivalent to moving the first element to the end; the total number of elements has not changed, but the positions have all changed)

Code:

 // 要填充的数据
 var data = {
    
    
     infoItem : [
         "<strong>第1行：</strong>安之安之安之安之安之安之安之安之安之安之安",
         "<strong>第2行：</strong>阳光彩虹小白马阳光彩虹小白马阳光彩虹小白马",
         "<strong>第3行：</strong>天地之悠悠天地之悠悠天地之悠悠天地之悠悠天"
     ]
 }
 // 将数据动态填充到页面种
 var infoList = []
 for (let i = 0; i < data.infoItem.length; i++){
    
    
     let infoStr = `<div class="item">${
      
      data.infoItem[i]}</div>`
     infoList.push(infoStr);
 }
 $(".info-wrapper").html(infoList.join(""))

 // 设置计时器，每隔2秒执行一次（变换一次）
 var timer = null;
 timer = setInterval(function () {
    
    
     // 将第一行item移到最后一行，其他的往上挪填补空缺位
     var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp );
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

html and styles section:

    <div class="container">
        <div class="wrapper">
            <div class="info">
                <div class="info-wrapper"></div>
            </div>
        </div>
    </div>

.constainer {
    
    
    width: 900px;
    height: 400px;
    border: 2px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    
    
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-content: center;
}

.info {
    
    
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
}

.info-wrapper {
    
    
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.item {
    
    
    border: 2px solid #ccc;
    border-left: 4px solid orange;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8px;
    margin-top: 20px;
}

The current effect is this:

insert image description here

Plus the animation of the sliding effect:

.item:first-child {
    
    
    animation: move 2s linear;
}
@keyframes move {
    
    
    100% {
    
    
        margin-top: -80px;
    }
}

Keep sliding, and when you reach the position where you can add a new item, trigger the addition of a new item:

// 设置计时器，每隔2秒执行一次（变换一次）--与animation动画时设置时间一致
var timer = null;
timer = setInterval(function () {
    
    
    if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
    
    
        // 将第一行item移到最后一行，其他的往上挪填补空缺位
        var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").remove();
        infoList.push(infoItemTmp)
    }
}, 2000)

You can get the effect of the beginning

Use jQuery to implement list loop scrolling tips

Guess you like