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.

The web’s first and only complete open source emoji set. It is 100% free and super easy to integrate.

THe goal is to standardize emoji on the web through the use of common :shortnames:.

When storing user inputted text in your database, say from a guestbook or through a CMS admin, you should always make sure you are storing text containing only :shortnames: and not Unicode emoji characters or emoji images. Then, when you are displaying that content to the user, you can convert it server-side with the PHP toolkit provided, or client-side using the Javascript toolkit which is also provided. Demos of this process using Javascript, jQuery, and PHP are included in the repo.

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.

A New, Lightweight, and Easy to Use ES6 Javascript @Mention Plugin from the Zurb crew. It allows you to quickly choose items from an arbitrary list with special characters.

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.

Javascript SPA frameworks, sometimes referred to as MVC frameworks, are a common way to solve this issue. These frameworks often lose the benefits of unobtrusive code. Writing unobtrusive javascript gives us more resilience to errors, and improved performance and accessibility.

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.

Tired of JavaScript’s “alert”. Then Sweet Alert is just what you are looking for.

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.

Installation is simple and can be done in-browser, through NPM or with a download of the CSS and JavaScript files. Load the plugin and you are ready to add custom alerts and go!

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.

This plugin works with all major browsers and IE8+ and the plugin works with any Javascript library.

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.