A simple marquee component with ZERO dependencies for Vue 3. This component was originally developed for internal use but I figured this could be useful to someone else as well. This component is modeled after a React marquee component I found called React Fast Marquee. To keep a smooth animation running, clones of the content can be created for seamless transitions with no sudden jarring appearences or empty spaces in between content.
View the live demos here: https://vue3-marquee.vercel.app/examples.html
If you would like to test out any functionality before downloading, you can use codesandbox.io to create a copy of an initialized playground. You can view the sandbox here: https://codesandbox.io/s/vue3-marquee-sandbox-09zm5?file=/src/App.vue
If you are using version 1.x or 2.x of vue3-marquee
you should upgrade to version 3.x. You can do this by running the Installation command below. This adds TS support for the component. There are some new imports so take a look at the new documentation.
If you are using npm:
npm install vue3-marquee@latest --save
If you are using yarn:
yarn add vue3-marquee@latest
The most common use case is to register the component globally.
// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
createApp(App).use(Vue3Marquee).mount('#app')
Alternatively you can import the marquee component locally.
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
export default {
components: {
Vue3Marquee,
},
}
You can then use the component in your template. A common use case is an image marquee for logos but you can also use it for scrolling text.
<template>
<Vue3Marquee>
<img height="200" width="300" src="...img" />
<img height="200" width="300" src="...img" />
<img height="200" width="300" src="...img" />
</Vue3Marquee>
</template>
<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
export default {
components: {
Vue3Marquee,
},
}
</script>
More detailed explanations are provided in the documentation.
Prop | Type | Default Value | Description |
---|---|---|---|
direction | String of either 'normal' or 'reverse' | "normal" | The direction for the content to move in |
duration | Number | 20 | The time taken for the marquee content to move the width of the container (in seconds) |
delay | Number | 0 | A delay before the animation starts (in seconds) |
loop | Number | 0 | The number of instances that the marquee animation should run (0 is infinite) |
gradient | Boolean | false | Whether to show a gradient overlay |
gradientColor | Array of 3 RGB values | [255, 255, 255] | The RGB colors for the color of the gradient |
gradientWidth | String | 200px | Length of portion of the container edges that should be taken by the gradient overlay |
pauseOnHover | Boolean | false | Whether to pause the marquee on hover |
pauseOnClick | Boolean | false | Whether to pause the marquee when you hold the right click button |
clone | Boolean | false | Whether to clone the content if you want no empty spaces in the animation |