Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.
For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to tweak your typing down to the smallest character, enabling you to type not just a few strings of text, but an entire narrative, with complete control over speed, characters, line breaks, deletions, pauses, everything.
Checkout several demos and a sandbox where you can try it out at macarthur.me/typeit.
View the full documentation for using TypeIt here: macarthur.me/typeit/docs.
To get started, first select a license:
Get it from this repo, or from the following sources:
https://cdn.jsdelivr.net/jquery.typeit/4.2.3/typeit.min.js
or https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js
on your page.npm install typeit
.<script src="jquery.js"></script>
<script src="typeit.js"></script>
<span class="type-it"></span>
You're ready to start typing!
In it's simplest use, just call typeIt()
on any element and include your options.
Example:
$('.type-it').typeIt({
strings: ['Enter your string here!', 'Another string!']
});
To control your typing down to the smallest character, there are five companion functions available to use. Simply chain them together following a typeIt() call on an element, and your chain will execute. You can define your global settings within the function call like usual, and can even change settings on the fly throughout the chain.
For example:
$('.type-it').typeIt({
speed: 900,
lifeLike: false,
autoStart: false
})
.tiType('I am typing slowly,')
.tiSettings({speed: 100})
.tiType('but now I am typing pretty fasst')
.tiDelete(2)
.tiType('t!');
Function | Arguments | Description |
---|---|---|
tiType() | (string) Characters (including those wrapped in HTML) to be typed. | Will type the characters. |
tiDelete() | (number) Number of characters to be deleted from what's already been typed. | Will delete the number of |
tiPause() | (number) Number of milliseconds to pause before continuing. | Will pause the specified number of milliseconds. |
tiPause() | (number) Number of milliseconds to pause before continuing. | Will pause the specified number of milliseconds. |
tiBreak() | (none) | Will break the typing to a new line. |
tiSettings() | (JSON) Options you'd like to update | Will redefine your options on the fly. This will only work for updating the speed , lifeLike , and html options. |
You can modify the options for the plugin by passging in JSON.
There are a number of options you may use to customize TypeIt. For more details on these options, view the full documentation.
Option | Description | Default Value |
---|---|---|
strings | (string or array) The string(s) to be typed. | 'Your default string.' |
speed | (number in millseconds) The typing speed. | 100 |
deleteSpeed | (number in millseconds) The deletion speed. If left undefined, will be 1/3 of the type speed. | undefined |
lifeLike | (boolean) Will make the typing pace irregular, as if a real person is doing it. | true |
cursor | (boolean) Show a blinking cursor at the end of the string(s). | true |
cursorSpeed | (number in milliseconds) The blinking speed of the cursor. | 1000 |
breakLines | (boolean) Choose whether you want multiple strings to be printed on top of each other (breakLines: true ), or if you want each string to be deleted and replaced by the next one (breakLines: false ). | true |
breakDelay | (number in milliseconds) The amount of time between typing multiple strings. | 750 |
startDelete | (boolean) Whether to begin instance by deleting strings inside element, and then typing what strings are defined via JSON or companion functions. | false |
startDelay | (number in milliseconds) The amount of time before the plugin begins typing after initalizing. | 250 |
loop | (boolean) Have your string or strings continuously loop after completing. | false |
loopDelay | (number in milliseconds) The amount of time between looping over a string or set of strings again. | 750 |
html | (boolean) Handle strings as HTML, which will process tags and HTML entities. If 'false,' strings will be typed literally. | true |
callback | (function) A function that executes after your typing has completed. | nuthin' |
This project is setup with Gulp to lint & minify the JavaScript. In the root of the repo, use these commands to run these default tasks and watch for file changes (make sure Node.js, npm, and Gulp are installed on your computer):
npm install
gulp
If I've made your life eaiser in some way by creating this thing and want to kick a small "thank you" my way, I'd very much appreciate it!
PayPal: paypal.me/alexmacarthur
Venmo: venmo.com/amacarthur
FAQs
The most versatile animated typing utility on the planet.
The npm package typeit receives a total of 8,396 weekly downloads. As such, typeit popularity was classified as popular.
We found that typeit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.