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

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

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…