The journey of bringing the StartupGiraffe platform to life on the web has been an exciting adventure, and we’re finally ready to share the specifics of creating a key aspect of the frontend for those who are curious.
The vision for the site was to encapsulate the playful essence of our brand while maintaining a responsive design ethos. Collaborating with our creative allies at Barrel NY on the visual aesthetics elevated our ambitions—further inspiring an array of possibilities. Their conceptualization included a rich palette of polygonal backgrounds alongside imaginative elements primed for a parallax scene, anchored by none other than a sizable giraffe icon.
Our main challenge revolved around harnessing JavaScript effectively—avoiding overuse that might hinder performance or detract from user engagement. After contemplation, we sidelined the parallax concept and introduced the “growing giraffe” effect as an innovative alternative.
Witness the demonstration of this innovative effect here, and if you fancy delving deeper into the code, the source files are available for download here.
Blueprint of the Site
Simplifying to its essence, the site is structured with three main stacked sections. The narrative and substantive content occupy the uppermost tier, the giraffe illustration sits in the middle, and a geometric-patterned backdrop forms the base layer:
<section id="background-wrapper">
<!-- GEOMETRIC PATTERNS! -->
</section>
<section id="giraffe-wrapper">
<!-- IMPRESSIVE TALL GIRAFFE -->
</section>
<section id="content-wrapper">
<!-- BRANDING, TEXT, IMAGES, FEATURES, etc -->
</section>
We exclude delving into the background wrapper here, focusing instead on the more dynamic components.
The Escalating Giraffe Illusion
We aimed to craft an immersive experience where the “Startup Giraffe” emblem appears anchored, ascending as users scroll, before seamlessly integrating into the flow of content. Critical to the execution was coordinating the giraffe graphic’s ascent from just below the initial view irrespective of screen size.
While several methodologies could serve this purpose, we grounded our approach in leveraging the jQuery.waypoints library for intuitive scroll-event reactions.
To choreograph the layered motion, the brand logo nests within a fixed enclosure inside the content section, its giraffe companion in close proximity, both with absolute positioning.
Web Structure Markup
<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>
Styling the Experience
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;
}
Bringing it to Life with Scripting
As our first step in animating the scenario, we configured the giraffe to start just beneath the viewport boundary. The height of the introductory section was set to equal the window height plus the giraffe segment we desired visible before the logo begins its scroll ascent.
$(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 subtly concealed, it seamlessly scrolls into view, gliding under the stationary emblem. The final part called for the logo’s conversion from fixity to the typical page scroll behavior.
Utilization of the waypoint plugin allowed for function invocation upon reaching certain page elements, considering the user’s scroll direction. We exploited these cues to adjust a class switching the logo’s positioning from fixed to absolute.
An offset modification permitted the pinpointing of the waypoint’s position, calculated from the logo’s dimensions and its top alignment, deducted from the height of the content section initialized during 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
}
);
In addition to other aesthetic enhancements, the logo now confidently anchors itself until it achieves a vertical traversal of about 380 pixels.
Curious for more details? Have insights on enhancements? We’re eager for your input in the comments section.
