smoothState.js: Unobtrusive page transitions with jQuery.
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
Quick Add To Cart: Add Product to a Shopping Cart
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 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.)
Payment Info: Mobile Friendly Credit Card Input Tool
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.
Flight Indicators: Display High-Quality Flight Indicator
The Flight Indicators plugin allows you to display high-quality flight indicators using HTML, CSS3, jQuery and SVG images. The methods make customization and real time implementation easy. And since all the images are vector SVG, you can resize everything without having to worry about any loss of image quality.
The plugin supports indicators for altitude (artificial horizon), heading, vertical speed, air speed and altimeter. The use for this plugin can vary but is a great tool for anyone with travel, flight or airport-based websites.
There are a couple of methods you can use to update the indicators and use a real-time interface. (You can see this process step-by-step in the plugin documentation.) The code is fairly simple and easy to understand if you want to make adjustments.
In addition to being useful, this plugin has a sleek interface design. Each of the indicators looks nice, features clean lines and can be implemented in almost any project. The included animation in the SVG files is also pretty seamless and really helps you to visualize changes to the included indicators. (You can also adjust some of the animation settings based on the graphic size you use in your applications for this tool.)
traceit: Trace the Page Elements
This plugin might be the most fun you’ve had all day; traceit allows you to trace page elements. You can draw arrows or rings or animated bits around images to provide users with a visual cue as to what they are supposed to do or where they are supposed to look on the screen.
The example is a great way to showcase the application of traceit. In the preview are diagrams of cat tails and in the sidebar are specific actions. If you click an action name, the appropriate tail image is circled so you can match action and visual.
Now that you know this is the right plugin for your project, download and include the script and its dependencies in your code. Select the traceable element and call the animation. That’s it!
You can create customizations as well for almost any aspect of the plugin. Change the color, stroke with, opacity, full, gap point and more as best suits your overall design. And just like magic use of the ESC key or changing the browser size will rest everything back to the start. It does not get much easier than this to use a plugin.
Trianglify: Create Triangle Meshes with SVG and CSS
Create colorful triangle meshes with SVG images and CSS backgrounds for any website design. The Trianglify plugin uses an algorithm to create beautiful triangle backgrounds so that you don’t have to pull your hair out trying to imagine a randomized design.
And you have complete control over the final rendering using a few simple tools. (You can download and install using NPM, Bower or CDNJS or try the Triangle Generator if you are concerned about the code.)
Start with the variance tool to determine the amount of randomness in the pattern. Then set a cell parameter to show how large or small each triangle can appear. Finally pick a color combination that works with your website hues. The plugin comes with a large number of preset options from the colorbrewer palette set that are ready to use. The colors range from monotone palettes to contrasting sets of color.
The final pattern can be output in canvas, SVG or PNG formats for ease of use no matter what your project type. And if you are still not quite satisfied, there are a few extra options as well in the code that you can adjust — such as background size, strokes, variance in triangle sizes in relation to one another and x and y color patterns.
Movie credits inspired plugin for websites.
Have you ever wondered what software is installed on your computer? There’s a plugin for that. Software Detect uses jQuery and Flash to show users exactly what they have installed.
Here’s how it works: Whenever you install any major software package, you will usually end up with a bunch of new fonts on your system. These fonts are almost always unique to, not only the software package, but also to the particular version of that software package. Extracting this “font signature” through the users browser can help you detect the kinds of software that a user has installed on their computer— and it doesn’t require any additional permissions from the user.
The return results are shown on a simple screen that show the name and version of installed software packages. It’s a quick and easy way to help see what versions you are using — and if an upgrade might be in order.
Generic Data Binder: jQuery Framework
Generic Data Binder (GDB) for jQuery is a framework agnostic and extremely easy to use as a two-way data binder. GDB binds views and models in real time with live two-way binding and no hefty framework is necessary.
Here’s how and why GDB can work for you:
- Works on all element types including
- Works with very complex models, even circular structures.
- Is template engine agnostic. Use your favorite client side template engine.
- Is framework agnostic. Use a framework? Don’t use a framework? Doesn’t matter. GDB will seamlessly integrate either way.
- Can be updated in real time. Not just
onkeyup, but as you type. It works with context menu options such as cut, paste and delete.
- Just 3.77KB when gzipped and minified.
- Updates to elements, immediately update the model.
- Updates to the model, immediately update the bound and watching elements.
The documentation is packed with options for you to try and examples of how to use this tool. If you are on the fence about this tool, viewing the examples will provide plenty of reason to try it out. It really is a useful element.
Plugin to play and stop animated gifs.
Google Analytics plugin that tracks how far users are scrolling.
Makes building interactive, multi-state prototypes for websites and apps easy.
For number, money and currency formatting