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
Wow.js was designed by well-known Vincent LeMoign aka Webalys and coded by Matthieu Aussaguel. It’s completely free for private and commercial use under the terms of the MIT license.
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.
Please make headlines clickable. Also clickable images would be fine. AT LEAST please provide link in summary. Why do I have to Google for those tools?
We have “Related Links” at the bottom of the article. All tools are linked from there, not only the demos, but also the repositories. I am writing about these tools, not trying to throw the next quick click…
I see, but I have to say this is not the behaviour I expect. Please think about that. I read your short review, was impressed and wanted to click :) I didn’t know, that there are links in the bottom, that’s why I had to used Google …
So, this is not the behavior that you expect? I expect a reader to read the article, which leads him directly to the link section. Thus, not reading the article actually is not the behavior I expect ;-) Think about that…