Before I raise suspicion I might want to missionize you, let’s head on over to our little list:
Usage is simple. ProgressJS can either work for the page as a whole, showing a progress bar right atop the upper end of the visible browser window. Having embedded ProgressJS and its corresponding CSS, the call looks like this:
Having ProgressJS handle a specific element, the call varies slightly to:
Take a look at the demo and download the script from Github. It’s completely free to use for private and commercial use under the terms of the MIT license.
Wow.js hides HTML elements until they reach the user’s viewport. Why would you want that? Well, it brings some motion into your overly static web pages.
For animation Wow.js relies on a separate CSS animation library. Per default it expects Animate.css to perform the action. If you prefer a different library, simple change it by linking it in.
After having Wow.js embedded and initialized like so,
it waits for elements equipped with the class
wow. Elements carrying this class will stay hidden from sight until he users scrolls far enough to make them reach the viewport. As soon as that occurs, the element becomes visible.
For a little more eye-candy, fire one of the available animations of the used CSS library at the class like so:
My unique content to be revealed
All you need is a service with a JSONP compatible API endpoint and a HTML template to display your data. 500px, Instagram, Pinterest, Dribbble (obviously), Github all offer JSONP. With Dug.js you create an output to your own site e.g. like that:
There are more parameters to explore. You can download Dug.js and use it freely without any further requirements as it is licensed under the WTFPL (do What The Fuck you want to Public License). A little embarrassing, yet awesome ;-)
Zoomerang.js can be downloaded from Github and used completely free under the terms of the MIT license.
Web developer Jack Rugile from Denver, Colorado (United States) wanted placeholder in input fields not only to be visible until focus, but again after blur. And he did not only want the text to disappear and reappear, but wanted a nice incremental delete and write back. That’s what Placeholdem does.
Add a placeholder to an input or textarea:
And run Placeholdem on all elements with placeholders:
Placeholdem( document.querySelectorAll( '[placeholder]' ) );
That’s the whole magic. Placeholdem is completely free for private and commercial use under the terms of the MIT license.