Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Animated Typing Utility with JavaScript

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:

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:

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:

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/

Creative Commons License
This work by Sascha Manns is licensed under a Attribution-ShareAlike 3.0 Germany License (CC BY-SA 3.0 DE).
Based on a work at saschamanns.de.


This post first appeared on Sascha Manns's Twilight Zone, please read the originial post: here

Share the post

Animated Typing Utility with JavaScript

×

Subscribe to Sascha Manns's Twilight Zone

Get updates delivered right to your inbox!

Thank you for your subscription

×