77 of 300

Navigation 77

Bar layout: Logotype

The wordmark is set across the full width of the page, from the left edge of the columns to the right. Scroll down and it shrinks and settles in its place in the bar.

A scroll-driven animation fitted to the ink of the letters

  • WhyA large logo is a known device, but it is rarely precise. Here the ink of the glyphs is measured, and their box is ignored, so the outer edges of the letters stand on the grid of the page.
  • RiskIt takes a large part of the first screen and should be skipped for returning visitors.
  • TechniqueA CSS scroll-driven animation. Scale and position come from drawing the word on a canvas and reading its pixels, with a JavaScript fallback where scroll timelines are missing.