🦸♂️ Adding the hero
We'll continue with a more exciting section! Before going crazy with animations, we need to set up the basics.
The markup
For this section, we created a dedicated partial which is included inside /views/templates/index.twig. We also extract data from /data/site.json using the {{ site }} variable.
<header>
<h1 class="u-screen-reader-text">{{ site.title }}</h1>
<figure class="c-hero" aria-label="{{ site.hero_label }}">
<div class="c-hero_image-wrapper">
<div class="c-hero_image">
<img
src="{{site.hero.img.src}}"
width="{{site.hero.img.width}}"
height="{{site.hero.img.height}}"
>
</div>
</div>
<svg class="c-hero_logo" x="0px" y="0px" viewBox="0 0 1400 515" style="enable-background:new 0 0 1400 515;" xml:space="preserve">
<!-- S -->
<path d="M226.5,514H67.9c-37.5,0-67.4-29.9-67.4-67.4v-121c0-12.3,10-22.2,22.2-22.2h91.9c12.3,0,22.2,10,22.2,22.2v111.1h21.4 V313.3c0-16.9-14.6-31.4-32.2-31.4H61.8c-33.7,0-61.3-29.9-61.3-67.4V81.3c0-51.3,29.9-81.2,67.4-81.2h158.6 c37.5,0,67.4,29.9,67.4,67.4v94.2c0,12.3-10,22.2-22.2,22.2h-91.2c-12.3,0-22.2-10-22.2-22.2v-85h-21.4v96.5 c0,17.6,13.8,31.4,31.4,31.4h65.1c33.7,0,60.5,30.6,60.5,68.2v173.9C293.9,483.4,264,514,226.5,514z"/>
<!-- W -->
<path d="M385.1,514c-37.5,0-67.4-30.6-67.4-67.4V22.3c0-12.3,10-22.2,22.2-22.2h91.9C444,0.1,454,10,454,22.3v351.6h21.4V22.3 c0-12.3,10-22.2,22.2-22.2H585c12.3,0,22.2,10,22.2,22.2v351.6h21.4V22.3c0-12.3,10-22.2,22.2-22.2h91.9C755,0.1,765,10,765,22.3 v424.3c0,36.8-30.6,67.4-67.4,67.4h-78.1c-37.5,0-67.4-30.6-67.4-67.4v-37.5h-21.4v37.5c0,36.8-29.9,67.4-67.4,67.4H385.1z"/>
<!-- A -->
<path d="M788.2,491.8V67.5c0-37.5,30.6-67.4,67.4-67.4h159.3c36.8,0,67.4,29.9,67.4,67.4v424.3c0,12.3-10.7,22.2-23,22.2h-91.1 c-12.3,0-22.2-10-22.2-22.2V295.7h-21.4v196.1c0,12.3-10,22.2-22.2,22.2h-91.2C798.1,514,788.2,504.1,788.2,491.8z M946,218.4V76.7 h-21.4v141.7H946z"/>
<!-- G -->
<path d="M1285.3,416c-12.2,0-22.2-10-22.2-23v-87.3c0-12.3,10-22.2,22.2-22.2h91.2c12.3,0,23,10,23,22.2v140.9 c0,36.8-30.6,67.4-67.4,67.4h-159.3c-36.8,0-67.4-30.6-67.4-67.4V67.5c0-37.5,30.6-67.4,67.4-67.4h159.3c36.8,0,67.4,29.9,67.4,67.4 v172.3c0,12.3-10.7,22.2-23,22.2h-91.2c-12.2,0-22.2-10-22.2-22.2V76.7h-21.4v328.6c0,17.6,13.8,31.4,31.4,31.4h49V416H1285.3z"/>
</svg>
</figure>
</header>
The styles
Let's start with the basics
.c-hero {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: vh(100);
padding: var(--grid-margin);
padding-top: vw(25);
}
.c-hero_image-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 10;
width: grid-space(math.div(3,12));
}
Handle responsive
We need to tweak the .c-hero_image-wrapper styles a bit to handle various viewport sizes. Let's add some media queries:
.c-hero_image-wrapper {
// (...)
// Desktop-ish
// Landscape
@media (min-width: $from-small) and (min-aspect-ratio: 1 / 1 ) {
width: grid-space(math.div(3,12));
}
// Portrait
@media (min-width: $from-small) and (max-aspect-ratio: 1 / 1) {
width: 40vw;
}
// Mobile-ish
// Landscape
@media (max-width: $to-small) and (min-aspect-ratio: 1 / 1) {
width: calc(700/940 * 75vh); // Translates to: we want height to be 75vh
}
// Portrait
@media (max-width: $to-small) and (max-aspect-ratio: 1 / 1) {
width: 50vw;
transform: translate(-50%,-66%);
}
}
We use SCSS variables for our breakpoints, you can find them all in assets/styles/settings/_config.scss
Add animations
It's a bit dull for now... Let's add some life! Starting with a simple slide down for the image:
.c-hero_image {
html.is-loaded & {
animation: slideDown 2s $easing;
}
}
Animations keyframes are defined in assets/styles/utilities/_animations.scss
$easing comes from assets/styles/settings/_config.scss
That was quick & easy! We will go deeper with the SWAG logo, but for that we need the help of smooth-scrolling!