This nifty little plugin helps manage your popup windows, including tool tips, notices and more. jBox is packed with powerful options and a few surprises for anyone that might want to use an online notification.
There are eight tool tip options — from basic tool tips to no-close options to color and style choices to click and scroll features.
There are four modal window tools — basic, draggable, ajax and submit. Plus, four notice tools with positioning at the top or bottom of the screen and visual options such as color.
The final style for jBox includes to image gallery formats.
This plugin is ready to go and easy to use right from the install. It’s optimized for retina screens, will work in any environment including IE 8+ and is lightweight, at only 19kb.
The only thing left to do is get started with jBox and all the customizations you can make for notification and popup windows for your website design.
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!)
ScrollAppear is a powerful and agile tool that makes content appear on scroll (or on other event triggers). It is a jQuery-based plugin.
ScrollAppear expands basic scroll function in a variety of ways to include the following:
- History of what has been shown as result of the plugin
- Ability to revert to a part of or all of what has been shown
- Ability to directly show elements without the user having to trigger a monitored event
- Ability to prevent mass scroll/appear of content by setting a timeout between events (in a similar fashion to hoverIntent)
- Set a pixel offset for your trigger element
- Set the number of event triggers to be performed before the event is unbound
This plugin is JSLint and JSHint compliant and comes with extensive documentation for ease of use.
ScrollAppear also includes a quite extensive parameter list with AddClass, Callback, DelayEffect, EffectDuration, ElementEffect, ElementsToShow, NumberofSccrolls, GatherAfterTrigger, PixelOffset, Timeout, TriggerIntent and TriggerType.
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.
CoverVid is a great little tool that allows your HTML5 video behave like a background cover image.
Here’s how it works:
- Pull the project down from GitHub and link
covervid.min.jsinto your site. Make sure it is loaded after jQuery.
- It is important to note that the video you target will use its parent element to scale. With that in mind, there’s some simple markup and base styling to size the video’s parent/wrapper element.
- Call the plugin and you are ready to go.
What’s especially nice about CoverVid is that this tool allows you to create a trendy video-based homepage with ease. You can add this tool to your existing site and get a trendy design refresh in no time. The hardest part will be finding the perfect video to represent your website or brand page.
Crossfade is a tiny jQuery plugin for crossfading images on page scroll. The end result is a high-impact scroll feature that can add a lot of visual interest to a website design without slowing it down.
This plugin is super-small — only 3kb. You can install using Bower and then initialize.
There are a few technical things you might want to know about this plugin:
- It preloads the start and ending images.
- It generates a
<canvas>element and appends it to the element. The canvas is automatically set to cover its parent, via absolute positioning.
- The starting and ending images are drawn into the
<canvas>and, depending on the position of the element in the viewport, superimposed on top of one another.
- Images are redrawn using
window.requestAnimationFrame, allowing for exceptionally performant rendering. Browsers that do not support
window.requestAnimationFramewill fall back to a timeout loop.
On install, you have options to adjust the start and end points of the fading animation, threshold and speed of the fade and default background position of images as the plugin does its magic.
The scroll up bar jQuery plugin hides the top bar when scrolling down, and shows it when scrolling up. It’s especially useful on mobile interfaces to save space. The effect is similar to what using sticky navigation that later hides during the scrolling process.
There are multiple uses for the plugin — simple, bar with offset and viewport callbacks. All are available for preview and usage in the demo.
There are a handful of available options to work with. You can pass callback functions in initialization to handle bar visibility events.
enterViewport– when the bar enters the viewport
fullyEnterViewport– when the bar is completely in the viewport
exitViewport– when the bar completely leaves the viewport
partiallyExitViewport– when the bar goes from being fully in the viewport to only partially
Install is simple with a script and call or installation using Bower. The plugin is also supported by all major browsers including Chrome, Firefox, Safari, Opera and Internet Explorer.
Morphext is a simple jQuery rotating, carousel-style plugin for text phrases powered by Animate.css. It does for lettering what a slider does with images so that you can display key words or phrases such as mission statements, taglines or catch phrases on your website.
Morphext comes with a lot of different morphing styles so that you can display text in almost any way you can imagine. This set of text features includes:
- Rubber Band
- Zoom in and out
- Speed in
- Roll in
What’s nice about Morphext is it does all of this while maintaining the readability of the words. You get the best of both worlds with a neat animation and highly readable text.
Installation using Bower is pretty straightforward. Just add the CSS and JS to your code, note the phrases to apply effects to and trigger the plugin. There are a few options for you to think about, including animation, separation, speed and phrase completion. (If you are worried about making it work, the demo includes some nice examples of usage.)
NumberProgressBar is a lovely animated progress bar with plenty of practical applications.
You can use it to note scale across a range of numbers, with a minimum and maximum, show percentages and show steps. It comes with plenty of options for you to determine such as color, animation styles, ranges and duration.
Installation is easy using Bower and then adding the CSS with your modifications.
Create divided multi-scrolling pages with two vertical scrolling layouts using multiScroll. The end result is a trendy multi-scrolling effect that works in the idea of parallax movements.
And it’s easy to use. You only have to add a few lines of code to your markup to make this multi-column scroll tool work.
Options included with this plugin include orientation and alignment, scrolling speed and color. You can also select different anchor points, easing, looping, padding, keyboard/mouse/touch sensitivity and menu options.
This plugin is designed to work in pretty much any environment — desktop, tablet or mobile — and works on modern browsers including some older ones such as Internet Explorer 8 and Opera 12. It works with and without CSS3 support.
There are a few sites using this plugin so you can see it in action (see the documentation for details) and the developer is open to working with you on customizations for a fee, if there is something more you want this tool to do specifically for your site. (Changes and other suggestions for improvement are also welcomed.)
If you need a perfectly straight row and are horrible at building tables, try rowGrid. And it’s even better than a table-style concept because pieces can sit without columns for perfectly randomized row formats. (Great if you are trying for that masonry look.)
The aesthetic of rowGrid is similar to that of a Google image search. It is fully responsive, built with infinite scroll and is supported by all major browsers, including Internet Explorer 8.
Here’s how it works: All items must have the same height but the width can be variable. RowGrid.js justifies the items in straight rows so that the width of the rows equals the width of the container/parent element. At first rowGrid.js adjusts the margin between the items. If this is not enough rowGrid.js scales down items.
When it comes to how this tool works, you have a few options. You have to set which items work with rowGrid, determine minimum and maximum margins, set resizing parameters and set classes for the first item and last row items. You also get to choose if items continue to auto-load or if there is a set number of images that will be shown in the grid.
TourTip is an interactive visual guide to elements on web pages.
Instead of cluttering your interface with static help message, or explanatory text, add a page guide and let users learn about new features and functions.
TourTip is a simple library for creating guided tours through your application. It’s better suited to complex, single-page applications than websites. Our main requirement was the ability to control the interface for each step. For example, a step might need count seconds before moving to the next step, or wait for the user to complete a task. TourTip gives you the ability to manage these parameters all at once or for each step separately.
TourTip gives you everything you need to call out new features. It is extremely flexible and lets you take control of how people interact with your tour. It is designed to be cross-browser compatible with modern browsers and even uses some fancy CSS to avoid images.
You can also add external content as well as images to the guides to make them more comprehensive.
The plugin is pretty powerful and has a lot of options which gives you the power to build a very cool tour. Use TourTip for websites, products, applications, landing pages or something else.