Building the StartupGiraffe website

Default avatar.
March 05, 2013
Building the StartupGiraffe website.

ThumbnailWe launched our new StartupGiraffe website a few months ago, and we've been meaning to write a post about how we did a piece of the frontend for anyone interested.

Our goal was to create a fun and responsive site that showed off our brand. Once our friends at Barrel NY agreed to do the graphic design for the site, we knew we'd also be able to pull of some neat tricks. We'd told them we wanted a really tall giraffe, but we didn't really see all of the possibilities until we got the designs back: there were polygons of different colors, angles and shapes in the background; in the foreground, there were all sorts of elements that could work well in a parallax website…and there was that enormous giraffe.

The challenge for us was to make sure we didn't go too far overboard with the Javascript so as to tax the performance of the site and distract the user experience. Ultimately we decided to scrap the idea of a parallax in favor of a "growing giraffe" effect.

You can see an example of the effect here, and if you'd like to follow along with the code, you can download the source files here.

Site structure

At a basic level, the site contains 3 sibling sections stacked on top of each other. The copy and main content of the site sits on the top layer, the giraffe is on the second layer, and the polygonal background on the back layer:

<section id="background-wrapper">
<!-- SHAPES! -->
</section>
</section id="giraffe-wrapper">
<!-- ONE VERY TALL GIRAFFE -->
</section>
<section id="content-wrapper">
<!-- LOGO, COPY, PHOTOS, SLIDERS, etc -->
</section>

For this demo, we'll omit the background wrapper because there's not much to it.

Growing giraffe effect

Basically, our goal was to fix the "Startup Giraffe" logo in place while the giraffe rises, then release the logo into the normal flow of the page at a certain point. Because the giraffe should start rising as soon as the user starts scrolling, her nose should be just below the fold no matter what the screen height is.

There are really a variety of ways to do this (and we're definitely open to suggestions), but the one we chose uses jQuery.waypoints as a means for detecting and responding to scroll events.

To make sure that the giraffe slides behind the logo, we put the logo in a fixed wrapper inside the "content" section. The giraffe is a sibling of the content section. Both sections are absolutely positioned.

HTML

<section id="giraffe-wrapper">
<img id="giraffe" src="giraffe.png" />
</section>
<section id="content-wrapper">
<section id="first-content">
<div id="big-logo-wrapper">
<img id="big-logo" src="sg_logo_large.png" />
</div>
</section>
</section>

CSS

body {
background-color: #000;
}
#content-wrapper, #giraffe-wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#first-content {
position: relative;
}
#big-logo-wrapper {
position:fixed;
top: 250px;
width: 100%;
max-width: 1920px;
}
#big-logo {
width:465px; height:231px;
display:block; margin:0 auto;
}
#giraffe {
position: relative;
left: 100px;
height: 3200px;
}

JavaScript

The next step was to set up the giraffe and the logo. We used JavaScript to set the giraffe just below the fold. Then set the height of the first section to be the window height plus the number of pixels we'd like to show for the giraffe before allowing the logo to scroll up.

$(function() {
var windowHeight = $(window).height(),
giraffe = $("#giraffe"),
firstHeight = windowHeight + 380,
firstContent = $("#first-content");
giraffe.css("top", windowHeight + "px");
firstContent.css("height", firstHeight + "px")
});

With the giraffe hidden just below the fold, we could see it scroll up under the fixed logo. Next, we just had to let the logo scroll away so it didn't remain fixed on the page.

The waypoints plugin allows us to call a function when the user scrolls past a certain DOM element. It also lets us detect which direction the user to scrolling. We used these "up" and "down" events to add or remove a class that toggles the logo's position property between fixed and absolute.

We also used the waypoint function's offset property to change the waypoint's position by an integer pixel value. Because the absolute (scrolling logo) class will align the logo to the bottom of its parent, we wanted the offset to be the height of the logo plus the logo's distance from the top of the site minus the total height of the first-content div (that we set on page load).

 var logo = $('#big-logo-wrapper');
firstContent.waypoint(
function( direction) {
if ( direction === 'down' ) {
logo.addClass("first-scroll");
} else {
logo.removeClass('first-scroll');
}
},
{
offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight
}
);

Besides a few other bells and whistles, that's pretty much it. The logo now remains fixed until the giraffe has gotten about 380 pixels up the page.

Got questions? Got a better way to do it? Let us know in the comments.

William Lerner

Will Lerner is co-founder of StartupGiraffe, a company that helps startups refine, design and build web and mobile products.

Read Next

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…

14 Best Free SEO Tools in 2024

There is an ongoing debate about whether design is more art or more science. SEO is 100% alchemy; if you know where to…