vue3-marquee-text-component

MarqueeText.vue

<script lang="ts">
import { defineComponent, h, useCssModule } from 'vue';

// https://github.com/EvodiaAut/vue-marquee-text-component/blob/master/src/components/MarqueeText.vue
export default defineComponent({
  name: 'MarqueeText',
  props: {
    duration: {
      type: Number,
      default: 15,
    },
    repeat: {
      type: Number,
      default: 2,
      validator: function (val) {
        return val > 0;
      },
    },
    paused: {
      type: Boolean,
      default: false,
    },
    reverse: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { slots, attrs }) {
    const style = useCssModule();
    const text = h(
      'div',
      {
        class: style.text,
        style: {
          animationDuration: `${props.duration}s`,
          animationDirection: props.reverse ? 'reverse' : undefined,
        },
      },
      slots.default(),
    );

    return () => {
      return h(
        'div',
        {
          ...attrs,
          class: `${style.wrap}`,
        },
        [
          h(
            'div',
            {
              class: [props.paused ? style.paused : undefined, style.content],
            },
            Array(props.repeat).fill(text),
          ),
        ],
      );
    };
  },
});
</script>

<style module>
.wrap {
  overflow: hidden;
}
.content {
  width: 100000px;
}
.text {
  animation-name: animation;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  float: left;
}
.paused .text {
  animation-play-state: paused;
}
@keyframes animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>