A smooth scroller component for Vue 3, inspired by the traditional <marquee /> element.
How to use it:
1. Install and import the vue-marquee component.
// globally
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
createApp(App).use(Vue3Marquee).mount("#app");
// locally
import Vue3Marquee from "vue3-marquee";
export default {
components: {
Vue3Marquee,
},
};
2. Add content to the scroller.
<vue3-marquee> ... Any Content Here ... </vue3-marquee>
3. Available component props.
vertical: {
type: Boolean as PropType<MarqueeProps['vertical']>,
default: false,
},
direction: {
type: String as PropType<MarqueeProps['direction']>,
default: 'normal',
},
duration: {
type: Number as PropType<MarqueeProps['duration']>,
default: 20,
},
delay: {
type: Number as PropType<MarqueeProps['delay']>,
default: 0,
},
loop: {
type: Number as PropType<MarqueeProps['loop']>,
default: 0,
},
clone: {
type: Boolean as PropType<MarqueeProps['clone']>,
default: false,
},
gradient: {
type: Boolean as PropType<MarqueeProps['gradient']>,
default: false,
},
gradientColor: {
type: Array as PropType<MarqueeProps['gradientColor']>,
default: [255, 255, 255],
},
gradientWidth: {
type: String as PropType<MarqueeProps['gradientWidth']>,
},
gradientLength: {
type: String as PropType<MarqueeProps['gradientLength']>,
},
pauseOnHover: {
type: Boolean as PropType<MarqueeProps['pauseOnHover']>,
default: false,
},
pauseOnClick: {
type: Boolean as PropType<MarqueeProps['pauseOnClick']>,
default: false,
},
pause: {
type: Boolean as PropType<MarqueeProps['pause']>,
default: false,
},
Preview:
Changelog:
09/20/2023
- v4.1.0: Added Pause Animation Option
06/29/2023
- v4.0.0
06/23/2023
- v3.1.3
08/23/2022
- v3.1.2
03/06/2022
- bugfix
02/15/2022
- update
11/20/2021
- hack fix for html element type
Download Details:
Author: megasanjay
Live Demo: https://vue3-marquee.vercel.app/examples.html#basic-example-with-text
Download Link: https://github.com/megasanjay/vue3-marquee/archive/refs/heads/main.zip
Official Website: https://github.com/megasanjay/vue3-marquee
Install & Download:
# Yarn
$ yarn add vue3-marquee
# NPM
$ npm i vue3-marquee