Vue3 implements CSS infinite seamless scrolling effect

This article example shares the specific code of vue3 to achieve CSS infinite seamless scrolling effect for your reference. The specific content is as follows

template

Double-layer div nesting for hidden scrolling display

<div class="list-container">
  <div class="marquee" id="carList">
    <template v-for="(item, index) in dataMap.list" :key="index">
      <div class="list-item">
        <div class="item-name text-overflow">{{ item.name }}</div>
        <div class="item-road text-overflow">{{ item.road }}</div>
      </div>
    </template>
  </div>
</div>

script

Copy the content in the DOM element and connect to the last scrolling effect

export default defineComponent({
  setup() {
    const dataMap = reactive({
      list: [
        { name: '浙A89268', road: '游8路', status: 0 },
        { name: '浙A89268', road: '游8路', status: 0 },
        { name: '浙A89268', road: '游8路', status: 1 },
        { name: '浙A89268', road: '游8路', status: 0 },
        { name: '浙A89268', road: '游8路', status: 1 },
        { name: '浙A89268', road: '游1路', status: 0 },
      ],
    });
    onMounted(() => {
      const marquee = document.getElementById('carList');
      marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
    });
  }
})

style

CSS handwriting animation effect

.list-container {
  width: 720px;
  height: 170px;
  margin-left: 13px;
  overflow: hidden;
  position: relative;
}
//Infinite scroll.marquee {
  //animation-delay: -5s;
  animation: marquee 15s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-51%); //This is not -100%!
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue achieves seamless upward scrolling effect of messages
Realize seamless scrolling effect based on vue-seamless-scroll
Detailed explanation of how to use vue-seamless-scroll seamless scrolling component
Vue achieves seamless scrolling of infinite messages
Vue implements simple seamless scrolling effect
Vue implements seamless scrolling effect of list
Vue implements seamless vertical scrolling of lists
Vue implements seamless scrolling of lists
Seamless scrolling effect based on vue.js
Vue or css animation to achieve seamless scrolling of the list upwards

<<: What should I do if I want to cancel an incorrect MySQL command?

>>: How to hide the version number in Nginx