Tips for implementing list loop scrolling based on jQuery (super simple)

I saw a good idea and recorded it.

I have used jQuery to achieve scrolling effects before. In these two articles, I wrote: Article 1, Article 2, respectively used scrollLeft() and scrollTop(), scroll() to achieve

Later I saw a demo and thought it was a great idea. I thought it could be used to scroll the list items. The effect was 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 fill the gap. If you slow down the filling process with animation, you can have a continuous scrolling visual effect (deleting the first element from the array and then adding this element to 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:

//Data to be filledvar data = {
     infoItem: [
         "<strong>Line 1:</strong>Anzhian ...
         "<strong>Line 2:</strong>Sunshine Rainbow Little White HorseSunshine Rainbow Little White HorseSunshine Rainbow Little White Horse",
         "<strong>Line 3:</strong> The vastness of heaven and earth. The vastness of heaven and earth. The vastness of heaven and earth. The vastness of heaven and earth."
     ]
 }
 // Dynamically fill data into the page 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(""))

 // Set a timer to execute every 2 seconds (change once)
 var timer = null;
 timer = setInterval(function () {
     // Move the first row of items to the last row, and move the others up to fill the vacancies var infoItemTmp = infoList.shift();
     $(".info-wrapper").append(infoItemTmp);
     $(".item:first").remove();
     infoList.push(infoItemTmp)

 }, 2000)

HTML and style parts:

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

.container {
    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 sliding effect animation:

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

Keep sliding until you reach a position where you can add a new item, triggering the addition of the new item:

// Set the timer to execute (change once) every 2 seconds - the same as the time set during animation var timer = null;
timer = setInterval(function () {
    if ($('.info').scrollTop() + $('.info').height() >= $('.info-wrapper').height()) {
        // Move the first row of items to the last row, and move the others up to fill the vacancies var infoItemTmp = infoList.shift();
        $(".info-wrapper").append(infoItemTmp);
        $(".item:first").remove();
        infoList.push(infoItemTmp)
    }
}, 2000)

You can get the effect of the beginning

This concludes this article about tips for implementing list loop scrolling based on jQuery (super simple). For more relevant jQuery list loop scrolling content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Jquery realizes the special effects of seamless upward circular scrolling list
jQuery implements automatic scrolling of lists to display news
jQuery loop scrolling news list sample code
jQuery implements automatic circular scrolling of the list and stops scrolling when the mouse is hovering
Continuous and pauseable scrolling example using jQuery
jQuery controls the li up and down circular scrolling plug-in usage example (with demo source code download)
Various JQuery loop scrolling text and image effect codes

<<: Graphical instructions for uploading and downloading files to a remote Linux host based on SecureCRT

>>: Solution to the problem that synchronous replication errors cannot be skipped in MySQL5.6 GTID mode