Richard The approached me to develop Midnight Commercial’s new portfolio website. The overall design was straightforward, but there were a few interactions and layout requirements that made this website unique and technically challenging.

Interlace Effect

The first interaction is an “interlace” effect that happens on the home page logo, and throughout the site on any anchor tags. Richard’s team already had a prototype of this effect created in JavaScript, and I helped optimize and generalize the code the be more flexible. I increased performance by replacing calls to jQuery’s animate method with the equivalent animation code using Velocity.js. I then refactored the script to make applying it to multiple, different elements easier.

Midnight Commercial
Midnight Commercial
Midnight Commercial

The interlace effect is achieved by splitting the DOM element into many short, repeated slices and positioning the slices vertically, offset by the height of the slice multipled by the index of that slice. A mouseover event is attached to each link that randomizes the horizontal offset of each slice.

Midnight Commercial interlace slice DOM

Collage Layout

The layout for each project on the home page consists of thee elements: a video, a block of text, and two images. These elements can be arranged and resized by the user to create unique compositions for each project. To make it easy for the user to arrange these items, I created a custom Wordpress plugin with a draggable, resizable interface. Elements snap to a 12 column grid and match the layout on the front end of the site.

Midnight Commercial Collage