1
We 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.
A Closer Look at WordPress 6.7: “Rollins”
The WordPress 6.7 release, named “Rollins” honors jazz legend Sonny Rollins, renowned for his improvisational mastery and innovative contributions to jazz. His iconic compositions, like “St. Thomas” and “Oleo,” reflect…
Why Responsive Design is Failing Modern Users
Yet, despite its widespread adoption, modern users are increasingly frustrated. Why? Because the once-revolutionary approach is failing to keep up with the evolving demands of today’s digital landscape. In this…
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user engagement: the HTML title tag. Often overlooked, this small…
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG of CO2 annually. Reducing your website’s carbon footprint is…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an experienced freelancer, a team of hardened developers, or a…
Rock Solid WordPress Security: Keeping Your Business Safe
WordPress is the web’s favourite CMS (content management system), renowned for its low-entry level and vast array of themes and plugins. WordPress’s open-source nature allows for endless flexibility, catering to…