Content Slider
Description
Here's another demo that's not truly Ajax (it's not making a call back to the server necessarily). It could easily be adapted to call external files using Ajax if desired, but my example uses inline content. Regardless, it is a nice effect and can be useful for presenting large amounts of content while using a relatively small amount of browser real estate. It's often nicknamed the "Coda effect" since the effect was popularized on a site by a software development company called Panic.
The demo I've included here is an adaptation (vastly improved from the original) created by Remy Sharp on his wonderfully helpful jQuery for Designers site. Be sure to check out his site(s) for many more nifty things to do with jQuery, each one including an instructional screencast, demo, and source code. From a learning standpoint, there's no substitute for trying things out yourself, so I encourage you to do as I've done here... roll up your sleeves and use it on a page of your own design. This demo uses jQuery, but also some jQuery plugins, including scrollTo, localScroll, and serialScroll for added special effects goodness.
Demo
Select a tab, text link, or arrow icon to navigate the content.
Tab One
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Two
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et tab four dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Four
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim tab three ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Five
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, tab one sunt in culpa qui officia deserunt mollit anim id est laborum.
You can also use external links: tab two, tab three, tab five
Reference
- Author: Remy Sharp
- Technologies: jQuery, jQuery plugins
- Source: jQuery for Designers
- License: N/A