Reactive Listener: Affect change over an element from a distance
Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do?
Reactive Listener allows us to affect change over an element from a distance that otherwise would not be possible. In this example, we detect the proximity of the mouse pointer to an element which reacts more vibrantly the closer to user’s mouse comes to it. Here we use this effect to draw attention to some additional information contained in a hidden div, but many more practical uses abound, like drawing attention to a share button, or CTA.
The reactive listener is currently a prototype where the only real thing it knows how to watch for is mouse position, but the core concept is extensible, and we can imagine reacting to things like scroll, rotation, GPS, and a variety of other data sources.
ScrollReveal: Easy scroll animations for web and mobile browsers
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!
SecretNav: Nav menu revealed with 3d effects
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 Animation Effect
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: jQuery, HTML, CSS Website Builder
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.
Animsition: jQuery Plugin for Animated Page Transitions
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.
jQlouds: Create Clouds on the Fly
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).
Blast: Typographic Manipulation
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.
Shine: A library for Pretty Shadows
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.
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.
LetterFx: Animated Visual Effects to Text
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!)
Flip Out Cards: Flip-Card Style Gallery
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.
randomColor: Generate Colors
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: jQuery Plugin for Scrolling Effects
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.