Paul Hayes

tag: transitions

Use CSS transitions to link Media Queries and JavaScript

A com­mon prob­lem in respon­sive design is the link­ing of CSS3’s media queries and JavaScript. For instance on a larger screen we can restyle, but it might be use­ful to use JavaScript and pull in dif­fer­ent con­tent at the same time, e.g. higher qual­ity images. With CSS tran­si­tions, specif­i­cally their tran­si­tio­nEnd events, we can marry up our media queries and JavaScript per­fectly, with­out resort­ing to win­dow resize events.

Creating a modern modal with CSS

Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more spe­cial. In this exper­i­ment, click­ing an ‘open’ link pops up a dia­logue with a smooth hard­ware accel­er­ated bounce (where sup­ported). When open all other ele­ments on the page are non-clickable. Clos­ing the modal is also ani­mated, with a min­imise effect.

Creating a sphere with 3D CSS

With CSS3’s 3D trans­forms it is pos­si­ble to cre­ate a sphere-like object, albeit with many ele­ments. Recently I’ve been look­ing at cre­at­ing applic­a­ble 3D carousels. These rely on posi­tion­ing pan­els in a cir­cle around a cen­tral point (ie. rota­tion about the Y-axis), I put these pan­els in an unordered list. A nat­ural exten­sion is to dupli­cate each <ul> and rotate about the X-axis, cre­at­ing a sphere.

Creating an animated 3D CSS cube using 3D transforms

A 3D cube can be cre­ated solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intu­itively nav­i­gated. Last week WebKit included the much antic­i­pated (at least on my part) 3D trans­forms in its lat­est nightly build. It is now pos­si­ble to cre­ate all sorts of crazy three-dimensional and ani­mated user inter­faces; the power comes largely in -webkit-perspective and a num­ber of updated transforms–adapted to incor­po­rate the Z axis.