Typing Text Effect

A simple and elegant typing text effect implementation with customizable text and styling. This project creates a typewriter-like animation effect for displaying text.

Features

• Real-time typing animation effect
• Customizable text input
• Support for line breaks using \n
• Generate standalone HTML file with the animation
• Responsive design with Google Fonts integration
• Modern UI with Font Awesome icons

Files

• index.html - Main HTML file with the user interface
• styles.css - CSS styling with custom classes and animations
• script.js - JavaScript implementation of the typing effect

Usage

1. Open index.html in a web browser
2. The default text will start typing automatically
3. To change the text:
   • Enter new text in the input field
   • Use \n for line breaks
   • Click "Update Text" button to see the effect
4. Click "Generate HTML File" to create a standalone HTML file with your text

Styling

The project uses:

• Roboto font from Google Fonts
• Font Awesome icons for buttons
• Custom CSS classes for styling:
  • .custom-body - Blue background with centered content
  • .custom-style - Bold text with shadow effect
  • .sb-button - Interactive buttons with hover effects

License

© 2025 S.Bhushan. All rights reserved. This code is licensed under the MIT License.

Contact

Email: [email protected]