Typing Animation Website

This project is a simple typing animation website that displays dynamic text with a typing effect using HTML, CSS, and JavaScript. The animations are created using the Typed.js library.

Screenshots

Demo

https://prasxor.github.io/TypingAnimationInTypescript/

Features

• Typing Animation: The website displays typing animations for various strings such as "Coder," "Programmer," "Web Designer," etc.
• Auto-Typed Text: It also includes a paragraph that dynamically types out a descriptive paragraph about your skills and achievements.
• Responsive Design: The layout is fully responsive, adapting to different screen sizes.

Technologies Used

• HTML5: For structuring the content.
• CSS3: For styling the layout and animations.
• JavaScript (Typed.js): For creating the typing animation effect.

Installation

1. Clone the Repository:

   git clone <https://github.com/prasxor/TypingAnimationInTypescript.git>

2. Navigate to the Project Directory:

   cd typingAnimationInTypescript
   

3. Open index.html in your Browser:

   You can simply open the index.html file in your browser to see the typing animation in action.

Usage

• Modify the strings in the index.js file to customize the text being typed.
• Adjust the typeSpeed and backSpeed properties to change the typing speed.
• Customize the design by editing the style.css file.

Code Overview

HTML Structure

<div class="container">
    <h1><span class="fixed">I'm</span> <span class="auto-type"></span></h1>
    <p><span class="auto-typed"></span></p>
</div>

CSS Styling

• The .container class centers the content vertically and horizontally.
• The .auto-type class styles the text that is dynamically typed in the heading.
• The overall design uses a dark theme with a contrasting highlight for the typed text.

JavaScript for Typing Animation

let typed = new Typed(".auto-type", {
  strings: ["Coder", "Programmer", "Web designer", "Video Editor"],
  typeSpeed: 100,
  backSpeed: 50,
  loop: true,
  fadeout: true,
  fadeOutDelay: 500,
});

let typed2 = new Typed(".auto-typed", {
  strings: [
    "You are an ambitious and skilled individual...",
    "...engaging a growing audience.",
  ],
  typeSpeed: 40,
  backSpeed: 50,
  loop: true,
  fadeout: true,
  fadeOutDelay: 500,
});

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a pull request or open an issue to improve the project.

Acknowledgments

• Typed.js for providing the typing animation functionality.
• Google Fonts for the Poppins font used in the project.

Instructions for Use:

1. Replace the yourusername in the clone URL with your GitHub username.
2. Customize the demo link if you've deployed the project online.
3. Adjust the project description as needed to better reflect your specific implementation.

This README.md provides a comprehensive overview of the project, making it easier for others to understand and use your code.