Tuesday, June 3rd, 2008
Ajaxian Featured Tutorial: Coda Slider Effect
<p>The effect of “sliding panels” has become extremely popular for categorizing & displaying large amounts of data on a single page. One of the most notable implementations of this effect was done by Panic to display all of the features and benefits of their Coda web development IDE. Since then, many implementations of this effect have been built and most are now referred to as “Coda sliders” since they provide very similar scrolling capabilities.Remy Sharp of jQuery for Designers has created a new screencast and 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.
This article will pick apart the pieces required to create the effect, and how to better it.
Remy’s tutorial aimed for several goals:
- Degrades perfectly without JavaScript enabled
- Sliding panels effect without hogging browser CPU
- Next and previous buttons added using JavaScript because they hold no use without JavaScript
- Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
- 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
The tutorial is very detailed walking you through the markup of the page, use of several jQuery plugins, setting up the navigation, and handling the events for the slider. Along with that, Remy created a screencast, available in both Quicktime and Flash formats, that explain how everything is put together.
Related Content:
4.1 rating from 41 votes
We just used the effect on our tour page: http://soundcloud.com/tour
Remy. Looks useful. Just wonderong, is there a reason why you didn’t add the page.html#subpage to the URL when clicking on the tabs etc?
This is great.
@GalloNero – I think he didn’t add the ID of the element to the hash on trigger because then it would make the screen jolt down to that level when you clicked. (I tried it and its REALLY annoying)
Chaps – I’ve spoke to Ariel about this option (the creator of the scroll plugins) and there is a way to manage this, and without jumping the page. If you add ‘hash : true’ to the scrollOptions it will do it. I’m planning on releasing a full plugin to handle the whole effect for you – so stay tuned!
I’ve always liked this effect, but didnt like the fact that it didnt loop and that you had to go through all of the in-between pages if you wanted to go from one to five. So I wrote something similar with mootools that can handle dynamic sizing based on the container element’s size. Check it out here – http://8trk.com/splash.php