scrollReveal.js is plain vanilla JS library that allows you to reveal elements as they enter the viewport. It’s remarkable in that it’s only 3kb minified, that’s small. The range of effects you can choose are vast, and it uses natural language to define the animation you want to run. No need for CSS3 transition and a script to detect the current page position in the browser window. Use ScrollReveal and be done with it!
justContext is a simple context menu plugin that doesn’t require jQuery, but kicks ass anyway. Just about 30 lines of JS and a bit CSS produce a slick plugin that enables fast, easy and styleable context menus. Every HTML element can host it’s own menu. Two themes are included.
Why did you build it?
Other context menu plugins are either unusably cryptic or depend on jQuery, a library that is way too big for a problem this small. justContext is “just a context menu”. It won’t get in your way and is easily hacked.
Why did you build this plugin? Why was it needed?
As part of the unification and rebuild of Notable that we’ve been working on over the past year, we were working with 6 different unique application environments. If we were to require rewriting them all to be consistent before we could introduce new features, we’d never make progress. So for cross-application features, increasingly we’re “going native” to make it easier to use the same libraries for new features across applications.
One of the new features we are working on in Notable is @mentions. @mentions, popularized by Twitter, allow you to call out other people in a conversation. We scoured the net for a open source, native, @mention library and came up with nothing. To solve this problem, we built our own and are excited to open source it as Tribute.
Illustration by akselkreis
We’ve accepted the jankiness of page loads as a quirk of the web even though there is no technical reason for it. smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.
SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.
Why are page transitions necessary?
Imagine, for a second, how disorienting it would be if touching a doorknob teleported you to the other side of the door. Navigating the web feels like using a teleporting doorknob. Layouts change, elements rearrange or disappear, and it takes time for the user to adjust. Smooth transitions reduce the effort it takes for users to get settled into a new environment.
How does smoothState.js work?
smoothState.js provides hooks that can be used to choreograph how elements enter and exit the page during navigation. It uses the time the animations are running to fetch content via AJAX to inject into the page.
smoothState.js doesn’t dictate how things on the page should be animated. It supports CSS animations, as well as JS animation libraries like velocity.js.
Design philosophy and requirements
The project’s main goal is to allow developers to add page transitions without having to add any logic to the backend. We keep things unobtrusive at all times.
smoothState.js initializes on containers, not links. Think of a container as a small window object embedded in the page.
Every URL on your site should return a full layout – not just an HTML fragment
The smoothState container needs to have an id set – a unique hook to tell us what to update on the page
All links and forms on the page should live within the container
These requirements makes the website resilient, since it smoothState.js can abort and simply redirect the user if an error occurs. Making each link return a full page also ensures that pages are created with progressive enhancement in mind.
Illustration by akselkreis
SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.
The plugin requires jQuery 1.7 or higher, and Modernizr.
Illustration by minnix
Material Design Hierarchical Display is a jQuery plugin that creates a hierarchical display animation effect. The meaningful transition helps focus user attention in an app and leads them from point A to point B.
This tool is pretty nifty with subtle visual cues for users that add an element of finesse to a design. Plus the plugin works with all modern browsers including Chrome 4+, Firefox 16+, Opera 12.1+, Safari 4+ and Internet Explorer 10+.
Use is pretty simple, just download the plugin, unpack and add a couple lines of code to your site. You’ll want to set a few options as well to make the plugin your own. Customization choices include action, speed, animation, and debugging.
The plugin comes with pretty extensive documentation so you can learn more and set it up with ease. There is also an option to run it with Animate.css if you are interested.
Slides Framework will help you to create a beautiful promo site with stunning animations and clean code.
The framework comes with 60 beautiful slides and 11 quick-start templates that you can combine. It was born to help you to create a beautiful form for the story you want to tell. Every slide is available in PSD, Sketch and HTML formats.
The advantage to Slides is that it is a one-of-a-kind presentation builder. It makes it quick and easy to build a site to show off your products. The code is clean, animations are crisp, the framework is designed beautifully and almost anyone can get a site up in no time.
Slides is fully-responsive as well, so that all your work will look great on any type of device. And with all the available options, every site created with Slides looks completely custom.
The full slides package, including templates, the generator, unlimited usage and support is $249 from Designmodo.
Ad blocking is one of the hot topics in website design and development right now. Adblock Identifier is a sweet little tool that detects ad blocking software and creates an alert for users that functionality will be disabled if the ad block is left running.
Installation is key with this tool and you should follow the instructions carefully. Customization options include the title, description and theme for how the message looks. It comes with light and dark options with a light default.
You have a few customization options to think about, including the text in the alert message. The tool allows you to keep users from specific content if they are using ad block software or just warn them for next time.
Quick Add to Cart is a handy snippet that allows users customize a product directly from the products gallery, and add it to a shopping cart.
The standard UX for product galleries is that a user clicks on a product, then navigates to the single product page. The user is expected to select options, and finally add the product to the cart. Nothing is broken in this process. However, a returning customer, who’s familiar with the products line, may find it handy to select and buy a product directly from the gallery. That’s what this little plugin does.
It provides a “quick add to cart” panel while users interact with a product preview. The plugin reduces the number of steps that separate a user from purchasing an item, and potentially increases the site conversion rate.
The plugin uses an unordered list HTML structure to make the tool work. You’ll need to add this code and styles to your website for complete functionality. The tool also comes with nifty animation so it works well and looks nice, too.
This simple and easy jQuery plugin for CSS animated page transitions give you tools for 58 different types of movement.
The robust animation plugin includes elements such as fades, rotations, flips, zoom in and out, overlays and more. And every animation comes with a preview mode so you can see how it works before you install the action in your website framework.
Animsition requires a browser that supports CSS3, which is how the animations are constructed. Supporting browsers include IE10+, Safari, Chrome and Firefox.
Download and installation are fairly easy. Link the required files, insert the HTML markup and call Animsition. That’s it. All of the code and options are available in the demo to make this plugin even easier to use.
Want an animation that’s not included in the Animsition plugin? You can create your own and submit it for inclusion. The plugin has nine contributors and the team welcomes future elements for this project.
This little plugin automatically centers itself on the page and looks great no matter if you’re using a desktop computer, mobile or tablet. And the customization options for this tool are almost limitless.
You can plug in Sweet Alert for almost any standard notification type.
Make sure to take a good look at the Sweet Alert configuration key chart. There are plenty of values for passing an object into Sweet Alert. The plugin also comes with some simple methods to call as well.
This plugin is a tool that can work for almost any website design. Who wouldn’t want a more custom and beautiful alert option? (And if you’d like to see more Sweet Alert features, make sure to let the developer know on GitHub.)
Pegasus is the plugin that will allow you to do two things at once; now you can load data while still loading other scripts. Using this technique, you can reduce the time to display data in single page apps without touching the server.
This plugin is a great option for static sites or when you can’t do server-side data bootstrapping or rendering.
Here’s how it is different. Without Pegasus data is loaded only after the library is loaded. (This is a pretty inefficient process.) With Pegasus embedded, data loads parallel to the library. With Pegasus running as a script, data is loaded as soon as the script is loaded. Either of the second pair of options saves a lot of time because of the parallel loads.
What’s even better? Pegasus is a tiny plugin, coming in at only 0.2 kB min/gzip, you won’t have any worries about it weighing down your website.
If you are still not convinced, check out the live demo to find out if Pegasus is the right plugin for and existing or your next website project.
Payment Info is a one-line, mobile friendly credit card input tool. The idea behind this plugin is to create a more streamlined credit card entry process.
The plugin was inspired by Luke Wroblewski’s thoughts on streamlining the collection of payment information by using input masks:
“Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.”
This is the concept employed by this simple plugin. The tool helps to seamlessly guide the user through the needed inputs to complete a transaction, but without having to navigate through multiple fields to accomplish this task.
Payment Info results in an easy tool that contributes to usability for your website.
Have you ever just needed a cloud or two in your design project? jQlouds allows you to clouds on the fly with a simple plugin.
You can generate multiple clouds on the same page, each element will be filled with random static clouds. Note that the selected element will be relatively positioned in order to accommodate absolutely positioned clouds.
Then you can customize the sky, animation, number of clouds, cloud size and more.
- Unlike the real sky, here we know exactly how much it is height: minimum height is given automatically based on the height of the biggest cloud. You can give a different height to the element through the plugin itself.
- Animation options include “wind” settings do that clouds have a natural look to them.
- The number of clouds is assigned randomly within minimum and maximum parameters.
- The default image provided (served as base64 image so you won’t need to upload anything but the plugin) is 227 by 96 pixels. Clouds are randomly sized less or equal to that size, unless you specify something different.
jQloudsis a fun little plugin that can help you add a touch of whimsy to any website design (while you have your head in the clouds).