Kevin’s Can

Filed under

slider

 

Apple-like scrollable showcase

I had a good JS session yesterday, building a widget for the marketing page of our freshly launched (Estonia only, right now) app Printfolder. Inspired by the the products browser at http://www.apple.com/mac/, we decided to try with something similar, but having panes with entirely different contents instead of displaying loads of coherent items. I named the class Scrollcase (of course it's powered by MooTools >= 1.2).

Live result (at the bottom of the page): http://www.printfolder.ee/

I wanted to keep the usage quite simple by not having strict rules about how the HTML should be structured in order to use Scrollcase, so the class generates as much elements as possible. Basically, something like this should be perfectly enough (with the complementary scrollcase.css file):

The container element does have to have a width defined, as the script relies on that all children have the same width, which is calculated from the container width.

If you like it, dig deeper into the sources at GitHub.

Filed under  //   apple   javascript   mootools   scrollable   slider  
Loading mentions Retweet

Comments [0]