The organizations I stalk for jobs most often tend to be either startups or marketing companies, and I’ve observed some commonalities among the two. They want to appear hip: Both simultaneously seek to enlist fresh faces and give off the air that they are a “fresh face,” that they’re tapped into what’s happening in the world.
The NYC-based agency Lead Dog Marketing Group put a lot of emphasis on flow when they designed their site. What’s more hip, young, fresh, cool, fun than a website with a little rhythm?
The site is a parallax scroller that begins with a slider (sigh, but we’re over it) and takes the visitor through an outline of the company: what makes them stand out, who they’ve worked with, what they’ve done, etc. Between each section is an image that appears static, creating a the cool drive-by effect often found in parallax.
They’ve organized the site’s HTML really well, which allows for them to do the same with the stylesheet. Each of those static images is pulled into a div classified as “pattern_parallax” with code that looks like this:
Giving the “position” property a value of “absolute” keeps the images static and ordered in between sections of text – they have one, unfaltering position on the page. Another attribute these developers use is the z-index, which I’m not totally familiar with, but I understand that it has to do with stacking elements on a page. This is important for the elements of Lead Dog’s page because certain things appear to be very deliberately in front of/behind others. The background parallax images are classified witha z-index of 3, which is low compared to other elements on the page with z-indexes of up to 16.
I love the way this site feels: easy and free. Moving up and down, I feel in control, and the menu bar is always there if I need to adjust my navigation. While these background images within Lead Dog’s parallax scroll are only a small piece to the puzzle of creating something this smooth, understanding them is a step in the right direction.