TypeIt: jQuery Animated Typing Plugin
TypeIt is a high quality jQuery plugin that types text a given string or strings of text on a page. Its responsive, lightweight and easy to customize.
To get started you can either pass in settings object, use data-typeit-* attributes, or You can define your string by dropping it directly in the HTML element. You can have it play back multiple strings and even set it to delete the previous string before starting a new one for that realistic effect. You can also alter details like speed, and even pacing to make it feel like a person is doing the typing.
bigfoot.js: Create Better Footnotes
Bigfoot is a jQuery plugin to help you create better footnotes and make them a lot easier to use.
Footnotes on the web can be a pain; you click a tiny number, get transported somewhere near the bottom of the page, find the footnote, and click on a link to go back where you can from.
This script makes that process painless by automatically detecting the footnote link and content. Then it turns the link into an easy-to-click button, and adds a popover when the the footnote button is clicked.
The script and default styles are built to work great on any size viewport; the popover is positioned on the top or bottom automatically (based on the relative amount of space), will update its location as the viewport changes size and will ensure that the popover never scrolls off screen. These elements make for a better user experience.
The tool is easy to install and use and comes with some options so you can make adjustments on your own.
underline.js: Draw and Animate the Text Underline
Here are some of the features of the tool:
- It is pixel-perfect on the half pixel level for retina displays
- It has an optimized thin stroke width that is always one-sixth of the width of a period
- It sits on the optimal Y position between the baseline and descender line (the golden ratio point
- It has holes around descenders to completely respect the type’s shape
According to the developer, the concept of underline.js is in constant development and is designed to help push the boundary of web typography.
There’s more to learn about this tool as well if you are interested in the story behind its development. You can watch the video from the NY Tech Meetup where it was presented.
Confirm Mailto: Confirm Before Opening Mailto Links
Confirm mailto is a simple little plugin that can save user frustration when it comes to clicking mailto: links because it adds a confirmation step to the process. It is designed to work with the default email client of the user.
The jQuery plugin has two options for usage — basic and advanced.
But if you want more control over the plugin, you can use the code using the advanced method. This code is a little more for those who are code-savvy and want to add some customized elements. With advanced settings, you can control default text in the body of the message as well. The code allows for settings for success, fail and callback as well.
Morphext: jQuery Rotating Carousel-Style Plugin
Morphext is a simple jQuery rotating, carousel-style plugin for text phrases powered by Animate.css. It does for lettering what a slider does with images so that you can display key words or phrases such as mission statements, taglines or catch phrases on your website.
Morphext comes with a lot of different morphing styles so that you can display text in almost any way you can imagine. This set of text features includes:
- Rubber Band
- Zoom in and out
- Speed in
- Roll in
What’s nice about Morphext is it does all of this while maintaining the readability of the words. You get the best of both worlds with a neat animation and highly readable text.
Installation using Bower is pretty straightforward. Just add the CSS and JS to your code, note the phrases to apply effects to and trigger the plugin. There are a few options for you to think about, including animation, separation, speed and phrase completion. (If you are worried about making it work, the demo includes some nice examples of usage.)
A simple autocue/teleprompter system, to scroll through lines of text.
Shuffle any of your text content.
Make superscript footnote markers with scrolling anchor links to a footnote section
Funny animated text.
Scribble out text with a squiggle instead of a boring strike-through.
A plugin for creating exceptional footnotes.
Shortens your text to a specified size, and then adds an ellipsis to the end.
Simple Text Rotator
Swap out / rotate words within paragraphs.