scroll-and-fade-text

Vue3 component which repeatedly scrolls and fades text in a carousel fashion.

Video.webm

Usage

1. Install the package:

   npm install @germingi/scroll-and-fade-text
   

2. Import the component:

   import ScrollAndFadeText from "@germingi/scroll-and-fade-text";
   import "@germingi/scroll-and-fade-text/style.css";

3. Use the component:

   <ScrollAndFadeText
     text="a really long string that is repeatedly scrolling and fading"
   />

4. Configure the animation timings (optional):

   <ScrollAndFadeText
      text="a really long string that is repeatedly scrolling and fading"
      :scroll-speed-px-per-s="100"
      :visible-wait-time-ms="1000"
      :invisible-wait-time-ms="1000"
      :fade-time-ms="1000"
    />

Demo

To see the component in action without installing it, you can use this repo! Here's what you need to do:

1. Clone this repo using git clone.
2. Change directory to the newly cloned repo.
3. Install the required packages with npm install.
4. Build the component with npm run build.
5. Deploy with npm run dev.
6. Check out the component in the browser of your choice! 😎