Nordstrom's Pop-In: Vans
An off the wall website
I had the pleasure to work on the Vans website for the Nordstrom Pop-In shop. It only lived for a short while but you can see a demo of the functionality in the video above.
I made heavy use of
<svg></svg>. The shoe-wall was achieved by stitching together hexagonal
<svg> had 3 benefits:
- The designers could provide small JPG assets of each shoe instead of PNGs with transparency. That drastically cut down on the network load.
- By clipping the JPGs with a hexagonal vector I could stitch them together to achieve the overall honey comb.
<svg>hit detection is not a rectangle, its whatever shape you make it. If it were a rectangle the hover effect would apply to the wrong shoe at the corners.