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).
Allowing users to login to your website with Facebook is one of the most sought-after options for developers. This action is familiar to users and creates a simplified login process.
The fblogin plugin does just that with a simple bit of jQuery. (And if you don’t want to use jQuery, this plugin also comes in an AngularJS version.)
The plugin allows for different levels of permissions with Facebook authentication: minimal login (no permissions), login requesting Facebook permission, login with only requested fields and login using deffereds instead of callbacks.
This plugin is activated by a user click so it does require some action to initiate the call on your website. You will also need a valid Facebook App ID and the Facebook JS SKD loaded to use the plugin. (Plugin documentation clearly explains these steps if you need them.)
This plugin is designed for more experienced site owners who have no trouble implementing third-party options or code requirements.
Blast separates text in order to facilitate typographic manipulation. It has four delimiters, including character, word, sentence and element. Alternatively, Blast can match custom regular expressions and phrases.
Blast’s uses include typographic animation, juxtaposition, styling, search and analysis.
The plugin is highly accurate; it neither splits words at spaces nor splits sentences at periods. All Latin alphabet languages and UTF-8 characters are supported. Features include:
- By only traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page.
- Automatic class and ID generation make text selection simple.
- Blast can be fully undone with a single call.
Blast is a cool little plugin that will make designers rejoice with additional text controls and manipulations for a variety of uses and website design options. It is a robust plugin that functions well while preserving some text specific styling such as bold and italics.
Creating the perfect shadow to mimic just the right bit of light can be tricky. Shine takes some of the trickiness out of it for you. This little library is designed just for making pretty shadows.
With tools to manipulate the light position and shadow shape, this plugin is a tool that keeps you from having to guess about the best placement for a shadow on an object or text.
Plus, it’s relatively easy to use. Just install using Bower and configure to your liking. You can change many of the options including what element you apply the shadow to in the website design, optional configurations, optional class prefixes and optional property names for which to apply shadows. You can draw and redraw shadows as needed to get them just as you like.
There are other variables for you to think about as well when it comes to the look of shadows using Shine — the number of steps drawn in each shadow, opacity of shadows and exponents applied to that opacity, offsets of shadows, strength of shadow blur and corresponding exponent and the shadow color.
Do users need to create PDFs on your website? jsPDF is a client-side solution for generating PDFs with ease. (Having PDFs available on your website makes downloads and printing that much easier for users.) The PDF tool is perfect for websites that allow users to download event tickets or information, reports, certificates, maps and more.
Plus, this plugin is easy to use. Simply include the jsPDF library in the head tag, generate a PDF using the built-in functions, then connect a button to trigger the download.
jsPDF works with pretty much everything, including IE 6+, Firefox 3+, Chrome, Safari 3+ and Opera. This plug does, though, need to be running though a web server.
The plugin comes ready to go with examples of how to turn all of the following into great looking PDFs — images, font faces, HTML rendering, circles, font sizes, landscape view, lines, rectangles, string splitting, text colors, triangles and more. Each example renders perfectly so you won’t have to worry about how your documents will look when users make the conversions.
And if you run into any issues with jsPDF, the developers over at Parallax are more than willing to walk you through it. Just send them a tweet to start a conversation.
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.)
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.
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.
This plugin allows you to apply animated visual effects to text, including individual letters, words or custom patterns. The jQuery plugin is simple and light.
LetterFx works by temporarily injecting markup into the text of an element and sequentially adding and removing transition-based CSS classes. This is a developer-level plugin and should be used by those who feel comfortable altering CSS classes only.
The resulting animations created with the plugin are simple but quite impressive. Use this tool to help add emphasis to certain text in the design.
Options for text animation include backward or forward motion, timing changes, duration of the animation, starts and stops, sorting, patterns, letter replacements and selection of text elements.
Unique effects included in this plugin include spin, fad, grow, smear, fall, swirl, wave, fly top, fly bottom, fly left and fly right. What’s especially nice about each animation style with LetterFx is that movement is simple, consistent and unobtrusive. Take a close look at each animation demo to see exactly how each moving letter or word style works.
One more bonus with LetterFx is that the code is designed so that you can even create your own custom animation with the plugin, using the provided actions or something you come up with on your own. (Have fun!)
Have you every wished your site included a flip-card style gallery? With the Flip Out Cards plugin, you can have just that.
The plugin features a sleek design, with simple and impressive animations that flip out left and right or top and bottom.
Here’s how it works:
- To create a flip out cards that show more info when hover, simply include the latest jQuery library together with
flipout_cards.cssinto your document’s
<head>, and call the function.
- Follow the HTML markup.
- The container with the class name
foc-mainwill be the main content area where the cards will flip out from. All other containers will be the cards. You can have as many cards as you like. Simply duplicate the container with the class name
foc-leftand the plugin will automatically stack it all up in order.
This type of tool works great for small chunks of simple information such as small stacking text or functionality such as the demo weather display.
PatternLock simulates an Android-like pattern lock mechanism for your hybrid app or website.
The plugin is lightweight and easy to configure and style so you can have a different type of pattern lock according to your needs. You can also configure this plugin with methods to use it securely.
PatternLock is pretty easy to use. Just include the jQuery and CSS to your page and follow the simple initialization. Then you can set the pattern for your validation (examples are included in the documentation).
There are a few options included in the plugin to help you make the most of the tool including a variety of matrix examples for the lock mechanism, margin pattern settings, radius pattern settings, whether the tracing pattern is visible or not during the drawing process, whether the tracing pattern is visible or not during the unlock process and whether the pattern can be set dynamically.
The plugin also includes directional classes which can be used to stylistic purposes or to provide hints for user success. These classes include general direction, north, south, east weest, southeast, southwest, northeast and northwest.
For generating attractive random colors, randomColor is a tiny and effective script. The focus of this tool is to generate plenty of random colors; the featured hues are bright and have high saturation.
There are some fun extras here too that allow you to create a colors based on a monotone concept, as light or dark colors, with grays or as a truly random color set.
The options you can control include hue, luminosity, count (number of colors to generate), seed and format.
The script is available minified on cdnjs; it is also distributed on NPM and Bower.
ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages.
ScrollMe works with modern browsers, including Internet Explorer 10+.
You can customize the plugin with options that are added as attributes to
scrollme elements with the
- From and to
Here’s how it works. ScrollMe uses a simple declarative syntax with two classes. The progression of animations is based on the scrolling through the scrollme class element. The animateme class defines the animated elements. Any number of these can be added within a container element. These elements also take the options that describe how and when the animation occurs. Both classes can be added to the same elements if you like.