ZEN is a demo of a single-song HTML5 Audio Player. It’s powered by jPlayer, styled and mostly animated with CSS3.

I’m really happy how the little details turned out. Like how it morphs from a circle to a square button and the swirl at the beginning. Also that it starts out simple and transforms into fancy pants only when needed.

Credits: Thanks to @maboa and @quinnirill for some JS help. Song from Every Day by Girl Talk.

See the demo.

Note: This is just an experiment and hasn’t been tested enough to be used as a real player. Also, the song is hard coded and would need to be made more dynamic. Use at your own risk. ;-)

  1. rinusg reblogged this from simurai
  2. nickrichyrichardson reblogged this from simurai
  3. kaimeister reblogged this from simurai
  4. apandabear469 reblogged this from simurai
  5. adri1reblog reblogged this from simurai
  6. nongs reblogged this from simurai and added:
    This is THE definition of elegance! Go ahead… Push the button. It WILL blow you away, especially if viewed on iOS…...
  7. handyvergleich2013 reblogged this from sneak
  8. dragorius reblogged this from simurai
simurai simurai

I’m a UIX Designer and like to experiment with CSS3. This site is my personal playground.

About
Contact