Advanced Title Effects

✨ Title Effects is a collection of advanced JavaScript effects that can be applied to the tag, transforming your website’s browser tab title into an interactive, engaging element. Perfect for enhancing user experience, this project allows you to customize the title bar with animated text, typewriter effects, notifications, attention-grabbing messages when users switch tabs, and even dynamic favicon changes to keep them engaged.

🌟 With detailed documentation and sample demos, this repository is designed for developers of all levels looking to add a little extra polish and creativity to their websites.

⭐ Whether you’re building a personal site or a complex web app, HTML Title Effects will offer easy-to-integrate code snippets and customizable options for seamless adoption very soon.

Effects

✨ Type Writer

• Class name -> type-write
• Effect -> Adds the typing effect to the title, with each character being typed with a custom speed of your choice

✨ Left Marquee

• Class name -> marquee-left
• Effect -> Adds the marquee effect to the title, with each character scrolling from right to the left of the screen with a custom speed of your choice

✨ Right Marquee

• Class name -> marquee-right
• Effect -> Adds the marquee effect to the title, with each character scrolling from left to the right of the screen with a custom speed of your choice

✨ Ping Pong Marquee

• Class name -> marquee-pingpong
• Effect -> Adds the marquee effect to the title, with each character scrolling first from left to right and then right to left of the screen with a custom speed of your choice

✨ Random Title

• Class name -> random
• Effect -> Chooses a random title and favicon from a custom list of titles and favicons and applies it on the website.

✨ Changing Title

• Class name -> changing
• Effect -> Chooses a random title and favicon from a custom list of titles and favicons and applies it on the website which gets changed automatically after a certain period of time.

⭐ All these effects work in loop and cannot be customised by the number of times currently. However, the feature is in progress and would be added within a week on the next patch update.

Installation

Install title-effects with npm

  npm install title-effects

Usage/Examples

After installation, in your html file insert the below code snippet

<script src="/node_modules/title-effects/index.js"></script>

Then in the title tag, add a class from the above list of class names

<title class = "marquee-left"> Hello World! </title>

Boom! See the title effect automatically applied in your web application🔥

Badges

Feedback

If you have any feedback, please reach out to us at [email protected]

License

MIT

Support

For support, email [email protected] or text me on Instagram at ritik_fr.

FAQ

Is This Project Completed?

The project is yet in development and new key features are yet to come along with lot of bug fixes if trying to use two effects at the same time.

When is the next update expected?

The next update is expected to come by the end of this month with various cool features, found no where else in the community.

Demo

https://i.ibb.co/XLxsFyC/Screenshot-610.png

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Authors

• @ritikyk