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.
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.
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.