Dynamic Header

Planted: Dec 2022

Status: decay

inverse.com have designed a sophiscated color theme technique. The page has a series of articles running down the page. Each article is assigned a different color. Artifacts within each article, such as the footer, use this color. Providing contrast between articles, reducing the cognitive load required to differentiate between them. Only some artifacts use the color. Just enough to get the point across. The majority of an article's text uses a white shade. This prevents the color from being overwhelming and making the copy hard to read.

Another technique being used is articles having an empty space at the top. The page's header is fixed. When the user scrolls a new article into view, the header fits into this space. Like 2 pieces of a puzzle coming together. This idea reinforced by the header's color changing to match an article's theme color. Together, these communicate the header and articles are parts of a single thing, rather than 2 seperate items.

Articles

To create this page, start with the articles (without color). An article is made up of:

▪ footer containing an author link and publish date,
▪ drop head (a headline that elaborates on the main heading),
▪ heading &
▪ body copy.

This note focuses on specific elements so there will be some differences between this and inverse.com's page.

Themes

To add a color theme to each article:

1. Add a data-attribute to each article.
Example: <article data-color="orange">
2. For each color, create a CSS variable.
Example: --color-orange: hsl(17, 100%, 58%);
3. Create another CSS variable, color-theme, and set its value depending on the attribute.
Example: [data-color="orange"] { --color-theme: var(--color-orange); }
4. For each element that uses a theme color, set its color to color-theme.
Example: article footer time { color: var(--color-theme); }

Page Header

The page header is made up of 2 SVG images; a site logo and menu icon. Both of these need to change color based on what article they are intersecting with. Therefore, the images' code needs to be moved inline (moved from an .svg to the .html file). When doing this, we lose the alt attribute for each image. To substitute, add a <title> with the alt value.

To set the header's color, we use the same approach as the articles, a data attribute and CSS variable.

Observe

To make the header change color depending on which article it is intersecting, we first need to execute a callback when an intersection happens. This can be done with the Intersection Observer. We want:

▪ the intersection area to be the viewport, minus the height of the header &
▪ the callback to execute when 1px of an article enters the area or the last 1px leaves the area.

Dynamic Color

If the user is scrolling down the page, the header's color should change when an article leaves the intersection area. Its new color should be the next article's.

If the user is scrolling up the page, the color should change when an article enters the intersection area. Its new color should be the entering article's color.

We now have a dynamic header.

Beyond Skeuomorphic

Skeuomorphic is the idea of moving something from the physical world to the digital. For example, during the early days of the Internet, newspapers were recreated as web pages. This was a good starting point, as it makes something new feel familiar and can speed understanding and acclimation. However, it doesn't take full advantage of what a computer can do. The idea of a fixed page header, a header that moves with the user, is a step up from skeuomorphism. It leverages what is possible in the digital space to provide a better UI. A dynamic header that changes color, depending on where the user is looking, takes this step even further.