Sascha Manns
Sascha Manns's Twilight Zone

Sascha Manns's Twilight Zone

Animated Typing Utility with JavaScript

Sascha Manns's photo
Sascha Manns
·May 21, 2019·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Ever wished a animated typing effect in your webproject? If yes, you should definitive check out the typit.js library. Last days i stumbled upon that interesting library.

The effect looks like:

![(cdn.hashnode.com/res/hashnode/image/upload/..)

How could you implement it?

Let we say, you would like to use this effect to show others your different job experiences.

First place a tag inside your code like that one:

<p id="replaceJobs"></p>

Then create a typeit.js file with the content

new TypeIt('#replaceJobs', {
    strings: ["Job1", "Job2", "Job3"],
    speed: 200,
    cursorSpeed: 1000,
    nextStringDelay: 750,
    loop: true,
    breakLines: false,
    waitUntilVisible: true
}).go();

Now add the JavaScript to your Layout Section:

<script src="https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js"></script>

and refer your typeit.js to that page, where your "replaceJobs" tag is placed. Now your type effect will start :-)

More on: https://typeitjs.com/

Did you find this article valuable?

Support Sascha Manns by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this

Impressum

Service provider

Sascha Manns

Contact options

E-Mail address: Sascha.Manns@outlook.de

Journalistic and editorial offers

Content responsibility: Sascha Manns (email address above)

Social media and other presences

This imprint also applies to the following social media presences and online profiles:

  • (https://www.facebook.com/sascha.manns)
  • (https://twitter.com/saigkill)
  • (https://instagram.com/sascha.manns)
  • (https://www.linkedin.com/in/saigkill)
  • (https://www.xing.com/profile/SaschaZyroslawKyrill_Manns/cv)
  • (https://github.com/saigkill)
  • (https://stackoverflow.com/users/7404985/sascha-manns)
  • (https://dev.to/saigkill)
Liability and property rights notices

Disclaimer of liability: The content of this online offer was created carefully and according to our current state of knowledge, but is only for information purposes and does not have any legally binding effect, unless it is legally binding information (e.g. the imprint, the data protection declaration, terms and conditions or mandatory instructions for consumers). We reserve the right to change or delete the content in full or in part, provided that contractual obligations remain unaffected. All offers are non-binding.

Links to other websites: Contents of external websites to which we refer directly or indirectly are outside our area of responsibility and we do not adopt them as our own. The provider of the linked websites is solely liable for all content and in particular for damage resulting from the use of the information that can be accessed on the linked websites.

Copyrights and trademark rights: All content presented on this website, such as texts, photographs, graphics, brands and trademarks are protected by the respective property rights (copyrights, trademark rights). The use, reproduction, etc. are subject to our rights or the rights of the respective authors or rights administrators.

Notes on legal violations: If you notice legal violations on our website, we ask you to inform us about them. We will remove illegal content and links immediately after taking notice.

Created with free Datenschutz-Generator by Dr. Thomas Schwenke