I wondered if it was possible to use SCSS and Jade’s for loops to pull this off using a variable grid, instead of having to hardcode everything.
With a bit of work, I was able to put the following together. Note that the color overlays are just to show where the grid items are.
So what’s different about this approach than the original inspiration? Using Jade and SCSS, this approach lets us change the grid size by changing just two numbers—a variable in the Jade markup, and a variable in the SCSS markup.
The Jade is simple enough, using a single variable which we multiply by itself to generate the right number div.grid-item which act as the controls which shift the image around when it is zoomed. So in this example, our gridRoot variable is 5, so we get a 5x5 grid.
And here’s the workhorse of this project, the SCSS. Note that it also has a $grid-root variable. This needs to match the Jade’s gridRoot variable in order for everything to work. We also set the size of the container and the on-hover zoom factor in the first three lines. Other than these three variable, the rest of the code can be left alone, as these three variables control the logic for how the rest of the code is generated.
For readability purposes, I’m just going to explain the rest of what’s going on via code comments.
And that’s it for that. With a change of two variables, we could make a 10x10 or 25x25 grid.
Yeah, yeah, but your scientists were so preoccupied with whether or not they could that they didn’t stop to think if they should.
— Dr. Ian Malcolm