/text-scroll-animation

This is a Customizable Text Scroll Animation Maker with the help of HTML Canvas and JavaScript.

Primary LanguageJavaScriptMIT LicenseMIT

TEXT SCROLL ANIMATION

This is a Customizable Text Scroll Animation Maker with the help of HTML Canvas and JavaScript.

⚑ Purpose

This repository contains project that will make scroll animation for the given text. Which captures that animation into video file as if needed...

⚑ Features

This project has following features that can be usable:

  1. This can create scrolling animation for given text.
  2. You can adjust Width and Height of video resolution as per requirements.
  3. You can add Horizontal and Vertical padding for positioning of the text content.
  4. You can adjust line height of the text animation.
  5. You can set font size for input text content.
  6. You can set Background color for the animation.
  7. You can set Text color for the given text content.
  8. You can export this animation as video file.
  9. You can set FPS for video export.
  10. You can adjust scrolling speed as per your need.
  11. You can set custom Google web fonts for the input text content.
  12. You can add font style as Normal, Bold, Italic and Underlined text.
  13. You can set text alignment in the animation.
  14. You can play and preview animation before export as video.

⚑ Key Points:

  1. If the content is over-sized to the container of canvas context this will wrap the words into new line.
  2. If the content is over-sized as a single word make it two words that will not be wrapped.
  3. If you face frame drops or bit laggy then adjust the FPS and scrolling speed of the animation.

⚑ How to use

To use this project. Following these steps:

  1. You can navigate to the demo link TEXT SCROLL ANIMATION.

Or If you want run on you system then follow these steps:

  1. First, Clone this project repository or download it in your system.
  2. Extract if you downloaded rather than cloned
  3. Navigate to the project folder.
  4. Find index.html file.
  5. Open by your system context menu options or by hit enter or by double click it.

This will opens in your default browser to run.

⚑ Requirements:

  1. Need JavaScript Enabled Web Browser to run.
  2. Make sure before running this project that you have enabled JavaScript.
  3. Internet connection is need to load third-party styles, fonts and Your custom fonts.

⚑ Conclusion

This is a basic HTML Canvas animation using JavaScript and This will play animation as classic and retro movie's end credits. Finally, you can export it for your needs.

⚑ Contribution

Contributions are welcome! If you have any suggestions, bug reports, or feature requests, please open an issue or submit a pull request. Make sure to follow the existing coding style and provide clear documentation for your changes.

⚑ License

This project licensed under the MIT license. Feel free to use, modify, and distribute it as per the terms of the license.

⚑ Contact

If you have any questions or need further assistance, please feel free to reach me at Email

Thanks for reviewing this project!