Architectural rendering firm One to One Hundred wanted a custom-built website for their marketing arm, One for All. A key component of the brief was that the site had to look good from mobile phones up to very large screens, as their clients would often be viewing it in very high resolutions. For this reason I used SVG format for the graphical elements, so that they would scale losslessly. Above the largest breakpoint I expressed most dimensions (including font sizes) in terms of CSS vw elements so that the website would retain the same aspect ratio and just ‘scale up’.
One to One Hundred also wanted a lot of movement on the site, so I used a lot of CSS animations and transitions. One of the most challenging to get working in all browsers was the animation of the word “Progress” on the home page. The brief called for this to be a text ‘cut-out’ with a cityscape showing through, and as the page scrolled down, the background image would appear to scroll up. This would have been much easier if -webkit-background-clip was a standard property! I ended up setting a background on the heading, and setting the text as a :before pseudo-element with a mix-blend-mode of lighten to get the knockout effect. I set a JavaScript waypoint to trigger a simulataneous CSS transition on the background-position of the image, and the height of the :after pseudo-element to get the desired relative motion. And I added a PNG fallback for the case where the mix-blend-mode was not supported.