One Page Love Logo
  • Need Hosting? We highly recommend Bluehost
  • Reviewed: March 27, 2015
  • Template? No, this is a custom built website
  • Built by: Bryan James
Create a One Page website with the free Layers theme and WordPress. See Tutorial
One Page Website Review

In Pieces

'In Pieces' is a phenomenal CSS-based interactive experiment bringing awareness to 30 endangered species. It's difficult to put into words what Amsterdam-based interactive designer, Bryan James, has achieved in this incredible One Pager - make sure you read his build notes in this review. Easy contender for One Pager of the year. If you missed it, here are last years Top 20 One Page Websites.
Born out of tinkering with a simple property, this project is unabashedly part-digital experiment. The core technology used here is just good old CSS — no Canvas or WEBGL witchcraft.

Since hearing about CSS polygons, I've been a little surprised at the lack of furore around the technology, so I wanted to create something which not only worked as a project in itself, but also pushed this underused line of code as far as possible.

The shard-shifting capabilities work in webkit-browsers only, which of course is a limitation but at the same time, it works on mobile which are almost completely webkit-based. Firefox does support the clip-path property, but as an SVG referenced shape and thus, the coding for movement works in an entirely different manner. I wanted to focus purely on the CSS route.

So, in essence — each shape is being morphed, moved and toyed with by a new set of co-ordinates, and as they are maintained as triangles throughout, this means 3 points, with CSS transitions to link up the movements. No tricks or tools have been used to get the illustrated results, code-wise or graphically. Point by point, shape by shape, each one has been handcrafted via a personally-created tracing JS function after illustration.

Here is an in-depth making of 'In Pieces' on Smashing Magazine.
Rob Hope

This original One Page website was reviewed by Rob Hope

I founded One Page Love back in 2008. It's come a long way but I want to continuously add value to your experience. Please tweet or email me with any questions or suggestions.