한 줄의 텍스트 위로 스크롤하는 효과를 얻는 방법(코드 첨부)

이 글은 한 줄의 텍스트를 위로 스크롤하는 효과를 얻는 방법(코드 포함)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

현재 이벤트 페이지 작업 중인데, 수상 발표를 표시하려면 위로 스크롤하는 데 한 줄의 텍스트가 필요합니다.

효과는 다음과 같습니다:

더 이상 고민할 필요 없이 바로 아래에 코드를 붙여넣기만 하면 됩니다.

html 코드는 다음과 같습니다.

 <div class="notice">
   <img src="./img/notice.png" alt="">
   <div class="wrap">
     <ul :style="{top: noticeTop + &#39;rem&#39;}" :class="{transitionTop: isActive}">
       <li v-for="(item, index) in noticeList" :key="index">{{item.phone}}抽中{{item.prizeName}}</li>
       <li v-if="noticeLen > 0">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
       <li v-if="noticeLen === 1">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
       <li v-if="noticeLen === 0">获奖公告</li>
     </ul>
   </div>
 </div>

less 코드는 다음과 같습니다.

 .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;
     }
 }

js 코드는 다음과 같습니다.

 // data下
 noticeTop: 0, // 公告top值
 isActive:true, // 是否显示transitionTop动画
 timer: null, // 公告滚动定时器
 noticeList: [
   {
     phone:'135****1234',
     prizeName:'50元还款券'
   },
   {
     phone:'135****1234',
     prizeName:'60元还款券'
   },
   {
     phone:'135****1234',
     prizeName:'70元还款券'
   }
 ], // 公告列表
 
 // computed下
 noticeLen(){ // 公告列表长度
     return this.noticeList.length;
 }
 //methods下
 noticeScroll(){// 公告滚动，定时改变公告的top值
     if(this.noticeLen > 0){
       let index =1,
           len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);
       this.timer = setInterval(() => {
         this.isActive = true;
         this.noticeTop = -3 * index / 10;
         index ++;
         if(index === len){// 滚动到底部时返回
           let delayTime = setTimeout(() => {
             this.isActive = false;
             this.noticeTop = 0;
             index = 1;
             clearTimeout(delayTime);
           }, 1000);
         }
       }, 3000);
     }
 }
 //调用
 this.noticeScroll();

주의해야 할 점:
1. vue의 구문을 기반으로 합니다
2. 맨 아래로 스크롤하고 돌아올 때 지연이 추가되어 마지막 항목으로 스크롤한 다음 마지막 항목에서 첫 번째 항목으로 돌아갑니다.                                      

관련 기사 추천: ​​페이지 스크롤 애니메이션 특수 효과를 얻는 방법은 무엇입니까?

CSS3을 사용하여 아름다운 버튼을 만드는 방법은 무엇입니까?

위 내용은 한 줄의 텍스트 위로 스크롤하는 효과를 얻는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!