jQuery for Designers: Coda Slider Effect

Posted in Frameworks, Development, Web Technologies on December 04, 2008

jQuery for Designers: Coda Slider Effect

Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect.

This article will pick apart the pieces required to create the effect, and how to better it.

How to Solve the Problem
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


Watch Video Watch Video Watch Video on External Site

Tags: Frameworks, Javascript, jQuery, jQuery for Designers