How to achieve the effect of single-line text up scrolling (with code)

This article introduces to you about how to achieve the effect of single-line text upward scrolling (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Recently in an active page, you need a single-line text up-scrolling effect to show the winning announcements.

The effect is as follows:

Don't say much nonsense, put the code directly below.

The HTML code is as follows:

<div class= "notice" >      <div class= "wrap" >     <ul: Style= "{top:noticetop + ' REM '}": Class= "{transitiontop:isactive}" >       <li v-for= "(item, index) in Noticelist": key= "Index" >{{item.phone}} pumped in {{item.prizename}}</li>       <li v-if= "Noticelen > 0" >{{noticelist[0 ].phone}} pumped in {{noticelist[0].prizename}}</li>       <li v-if= "Noticelen = = 1" >{{noticelist[0].phone}} pumped in { {Noticelist[0].prizename}} </li>       <li v-if= "Noticelen = = 0" > Award announcement </li>     </ul>   </div> </div>

The less code is as follows:

. notice{     Display:flex;     Justify-content:center;     Padding-bottom:. 26rem;     img{       width:. 3rem;       Height:. 24rem;     }     . wrap{       position:relative;       Height:.3rem;       Overflow:hidden;       Margin-left:. 15rem;       Font-size:. 24rem;       Color: #391b03;     }     ul{       position:relative;       Top:-.3rem;       li{         height:. 3rem;         Line-height:. 3rem;       }     }     . transitiontop{       transition:top 200ms ease-in-out;     }}

The JS code is as follows:

It should be stated that:
1. Project is based on Vue's syntax
2. Scrolling to the bottom returns a delay in order to be able to scroll to the last one and then return from the last one to the first one.

Related articles recommended:

CSS3 How to implement page scrolling animation effect?

How to make a good-looking button with CSS3?