Lead Dog and the Power of Parallax

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.

Screen Shot 2015-03-13 at 12.10.49 AM

Screen Shot 2015-03-13 at 12.11.01 AM

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:

.pattern_parallax {
position:absolute;
width:100%;
height:100%;
background:url(images/bg_patterns/pattern_parallax.png);
z-index:3;
}

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.

Advertisements

One thought on “Lead Dog and the Power of Parallax

  1. I agree that parallax scrolling is a nice feature on this site. The large photos are a really great addition to their content and help keep the scrolling interesting. I actually would have liked to see the photos larger, the wide but short frame they were allowed made it difficult to see what was going on in the frame with a few of them.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s