Slider

CSS transitions only work in WebKit browsers (e.g., Safari & Chrome).

When you click a button in WebKit, the columns will slide gracefully from one position to the other. The effect is even hardware accelerated where possible.

In other browsers (e.g., Firefox), the display will simply jump from one state to the next.

What I’m doing here is setting up some transition parameters in the CSS, then just using JavaScript to swap out classnames that affect some CSS properties. The following is a reduced case, view source on the page to see the whole enchilada. Mmmm, enchiladas…

.col {
  -webkit-transition-property: opacity, left;
  -webkit-transition-duration: 1s, 500ms;
}

.pos0 {
  left: 0;
  opacity: 1.0;
}

.pos1 {
  left: 320px;
  opacity: 0.1;
}