The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

Design

Design Category

Big, Bold, And Responsive Headlines – slabText

slabText is a jQuery plugin for creating responsive headlines.

slabtext Big, Bold, And Responsive Headlines   slabText

slabText is actually a JS port of the elderly slabtype algorithm.

The library is inspired by FitText that we’ve covered earlier, but it’s different in some aspects:

  • slabText is for creating headlines, not landing-page-style ‘giant text’;
  • slabText has functions for manually separating words;
  • FitText doesn’t automatically separate words into lines.

Overall, the library is a very good solution for creating awesome, responsive headlines; and the breakpoint system (plus other nifty features) help a lot.

Expand And Collapse Content – Collapse

Collapse is a jQuery plugin for creating progressive disclosure designs.

Basically, Collapse provides a nice, lightweight (600b) solution for expanding and collapsing website content.

collapse Expand And Collapse Content   Collapse

What’s the best about progressive disclosure interfaces is that they don’t confuse the users with any information they don’t need at hand.

The additional elements can be shown with a transition, e.g., a sliding motion.

Collapse features a number of options and callbacks (cookie support is notable) thus it’s suitable for creating even the fanciest of web apps.

Display Content on Element Hover – ContentHover

ContentHover is a jQuery plugin for displaying content upon mouse hover.

contenthover Display Content on Element Hover   ContentHover

The plugin features a simple and efficient markup, and allows you to show hidden content on any given HTML element.

ContentHover is well-documented, and holds important options like slide speed, transition effect, fade effect, etc., along with the ever-useful callbacks.

Overall, plugins like this are useful for many things, e.g., eCommerce, galleries, and so on.

Websites On An Infinite Canvas – jmpress.js

jmpress.js is a jQuery port of impress.js for making websites on an infinite canvas.

jmpress Websites On An Infinite Canvas   jmpress.js

jmpress.js cleverly uses the jQuery API and is thus more developer-friendly than impress.js — for most. The library uses jQuery UI themes, falls back to .animate() when transforms aren’t supported, and provides touch support for mobile devices.

We just recently covered impress.js, but this port is for making actual websites, not presentations.

Easy & Impressive Parallax Effects – Stellar.js

Stellar.js is a JavaScript library for achieving a parallax effect on any scrolling element.

The library supports iOS (with Scrollability) and most major browsers.

stellarjs Easy & Impressive Parallax Effects   Stellar.js

Stellar.js is impressively easy to use; the available attributes are intuitive, and, after a quick look at the docs, you’ll be able to create parallax animations in no time.

All parallax-ed elements will return to their original position when their offset meets the edge of the screen — see the demo in the homepage.

Easy Vector Graphics With JavaScript – JSGL

JSGL is a JavaScript library for drawing, moving, and changing graphics objects dynamically.

vectormap Easy Vector Graphics With JavaScript   JSGL

What’s interesting is that JSGL offers a way of vector drawing in JavaScript, which is especially useful for projects like PathFinder where the distance is calculated with vectors.

JSGL also provides an easy-to-use API (well, at least if you’re familiar with vector concepts) and Java-like classes under an object-oriented programming model, which, altogether, makes a coherent and powerful library for graphics manipulation.