Svidget.js for SVGs

  • Posted By: Jason Taetsch
  • ...

Scalable vector graphics or SVGs are lightweight, easy to modify and scale in size without losing quality.  For these reasons they can be an ideal choice developers and designers looking to add visual elements and slick functionality without overloading the size of your site. Since SVGs are really just XML objects, they can be edited, manipulated and animated on the fly unlike other graphic formats like .PNG. The team at svidget.js expand on these core features to deliver interactive widgets ready to be embedded on any website.  Svidget.js only creates a framework for the SVG files rather than injecting content to the DOM to avoid conflict with any other libraries or widgets already in use.

svidget

Scroll-to-Top Elevator.js

  • Posted By: Jason Taetsch
  • ...

Scrolling back to the top of a web page has never been a favorite experience for users. After they’ve read through all your content, there’s no reason to force the user to perform the tedious task of scrolling back up to the top menus and content. Though on-page anchor links have been around for years, the team at elevator.js has come up with an old-school scroll-to-top functionality that mimics the experience of riding in an elevator, complete with light-music and sound effects. Rather than jumping to the top, elevator.js smoothly returns the user to the top of the page with a slightly increasing speed and a soothing soundtrack. Elevator.js is a simple stand alone-library that does not require jQuery to incorporate into your next project.

elevator

Select or Die

  • Posted By: Jason Taetsch
  • ...

The design is in the details. Unfortunately designers are often forced to hand over the reigns to the native browser presets for “select” and “option” elements. The Select or Die plugin is a highly configurable jQuery-based option for taking the stylistic reigns back from the clunky browser style rules. Select or Die attaches custom CSS attributes to easily roll your own style rules as you would any other HTML5 element. Additional features make it easy to configure placeholders for the select elements, apply unique styles to different elements and even treat the various options in the drop-down menu as external links to other pages. If you are looking for more control of your design, Select or Die is a great place to start.

selectordie

 

Local Font

  • Posted By: Jason Taetsch
  • ...

The wonderful world of fonts has truly turned the world wide web into a much more visually appealing place. The widespread use of fancy display fonts does come with a view downsides however, largely on the performance end. The localFont tool created by Jamie Caballero uses local storage functions to store the CSS for @font-face declarations.  The tool saves the font files as part of the CSS file allowing them to be accessed much faster than typical caching techniques. Browser support for the caching goes back to IE 8+ so you can feel comfortable using it on sites that don’t require legacy support.

localfont

Loaders.css

  • Posted By: Jason Taetsch
  • ...

CSS animations are smooth, native to modern browsers and fast-loading. With so many upsides they are a ripe solution to replace clunky GIFs and script based animations that often require additional libraries and struggle to provide a smooth experience across platforms. Loaders.css by Conner Atherton is a set of performance based animations to keep users engaged while the content on your page is served to their browser.  CSS-based animations provide a far better experience than typical jQuery or Javascript without the typical jumps and quirks associated with translating elements across the page.

loaders