Dick's Sporting Goods

We worked through many of the challenges presented by fullscreen video sites, in both desktop and mobile environments, in our previous Baseball and Running projects. This time, our biggest technical challenge was figuring out how to create the interactive hexagonal product tiles that surface on top of the video.

ШУУД ҮЗЭХ

We created the diamond shapes on the Running site by rotating the square elements in CSS using CSS transforms. But this time, after exploring a few different shapes, we decided to create a grid of hexagonal tiles, which meant we needed a different solution. After prototyping the idea to find out if it was even possible, we landed on using Scalable Vector Graphics (SVG) to draw the hexagonal shapes, and then rotated imagery into the individual tiles. Because the site is responsive, we also had to find a way to make sure tiles could scale to all screen sizes. To show a consistent number of tiles on all screens, we used the screen's surface area to calculate the appropriate size of hexagons to surface in the space. (If you’re reading in a browser, you can watch the tiles automatically resize as you reduce or increase the size of your browser window.) Drawing custom polygon shapes was a challenge on its own — having them display and function with a video running behind them was even trickier. We also had to ensure that the tiles could control some video functionality, so that when a user clicks on a tile to view a product or selects the full product view, the video would pause. As complex as it was, the unique experience created by the interactive hexagonal tiles displaying over the video background was certainly worth it. Read more...https://viget.com