Skip to content

ag-sanjjeev/canvas-text-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 

Repository files navigation

TEXT ANIMATION

This is text animation video maker with the help of HTML canvas and JavaScript.

⚑ Purpose

This repository contains project that will make text animations 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 fade, zoom, show 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 transition and animation duration 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 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 text animation using JavaScript and This will play text animation with selected transition. 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 by referring My Github Profile

Thanks for reviewing this project!