Skip navigation

jQuery

The Write Less, Do More, JavaScript Library

Coda Slider Effect using jQuery

Remy Sharp created a new screencast and detailed tutorial on “how to create a coda slider effect using jQuery:“ Although Panic didn’t really invent the effect, the sliding panels on the Coda is great implementation of this effect.

Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements:

  1. Degrades perfectly without JavaScript enabled
  2. Sliding panels effect without hogging browser CPU
  3. Next and previous buttons added using JavaScript because they hold no use without JavaScript
  4. Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
  5. Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work

Full Article | Demo

CrossSlide - Create Pan and Cross-Fade Animations

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.

CrossSlide can do simple Static cross-fade, Slide + cross-fade and Ken Burns effect: panning, zooming and fading to specific points, to guide the eye of the viewer and convey meaning. This kind of effect relies on the browser for positioning, scaling and cropping images, through CSS and the DOM.

jCrop - Powerful Image Cropping Engine for jQuery

Jcrop is a powerful image cropping engine for jQuery. It’s been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility.

It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Jcrop also features clean, well-organized code that works well across most modern web browsers.

jQuery Image Crop