Transform:rotate method: CHVRCHES – The Bones of What We Believe

CHVRCHES_full site

I found this site doing work for my personal blog doing music reviews. This group, CHVRCHES, uses a stylized V in the spelling of their name – pronounced “churches” – and wanted to incorporate it in the design of their site. The V is a part of the design of the audio player that looks vaguely like a vinyl album.

CHVRCHES_detail

The different rings of the circle spin when you mouse over them, or when you click the arrows on either side to play a different song from the album. Digging through the code I found the transform: rotate method, which adjusts the orientation of an object designed in CSS. What’s especially interesting is that the code changes in front of you as you mouse over the objects, the degree value changing rapidly as the circle rotates on its axis.

CHVRCHES_code

I’m still not sure how it is that the objects respond automatically to mouseovers, but it’s a really cool effect and I enjoyed its use on this album’s promo page. It was a little touch of engagement that made me more interested in the group and their work.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s