DEV Community


Use infinite animate create fancy effect

Web developer in Longbridge
・1 min read

Alt Text

I have feature should show stocks indeics auto infinite scroll. first i want to use javascript to controll it. but other developer told me we can use CSS animation create this,it's cool let's me show you code below.

  <div class="marquee">
    <div class="marquee" :style="{ width: `${width}px`, height: `${height}px` }">
      <div class="marquee--inner">
        <div class="group">
          <slot />
        <div class="group">
          <slot />

import PropTypes from 'vprop-type'
export default {
  name: 'Marquess',
  props: {
    width: PropTypes.integer,
    height: PropTypes.integer.def(20),
    itemKlass: PropTypes.string.def('item'),
    speed: PropTypes.integer.def(8) // 5s

<style scoped lang="scss">
@import '_variable.scss';
.lb-marquee {
  overflow: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  .marquee {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  .marquee--inner {
    display: block;
    width: 200%;
    margin: $gutter-sm 0;
    position: absolute;
    // keywords
    animation: marquee 40s linear infinite; 

  .marquee--inner:hover {
    animation-play-state: paused;

  .group {
    float: left;
    width: 50%;
    .item {
      width: 100px;
      display: inline-block;
      float: left;

  @keyframes marquee {
    0% {
      left: 0;
    // here is keywords
    100% {
      left: -100%;

That all you can use the Vue component like this:

<Marquess :width="210 * 8" :height="140">
  <div v-for="(item, index) in  items" :key="" :index="index" class="item" :style="{ width: '210px' }">

I have videos to show what the component is demo

Hope it can help you :)

Discussion (0)

Forem Open with the Forem app