Hub Crawl EU
Long Scrolling One Pager for the upcoming ‘Hub Crawl EU’ event. Nice integration of the big intro text and the buildings creating depth. A big thank you for the excellent build notes Jacob, very insightful!
This build was pretty quick for a Foremost build, I wrote my own jank scripts to get the parallax header working, the images used for the city are actually public domain images of the skylines of the three cities the program covers, Berlin, Prague, and Vienna. I wanted to use the parallax header to bring together the three cities into one skyline.
The site is adaptive rather than responsive, loading different viewport sizing and conditionals based on window width and height, but actually functions quite nicely on the most commonly used devices. I ended up cutting the parallax header for mobile, it seemed to lose it's effect if it wasn't ridiculously wide.
This site is one of our first to use Hoefler.Cloud Typography, which is a dream to work with. Takes care of FOUT somehow (super fast delivery maybe?) Hoefler delivers our Sentinel Weights for the project, with MyFonts bringing in Trade Gothic Bold.
The site is built on Foundation, and their height equalizer scripts made it possible for me to make the 50%/50% split region with a full background image fairly simply while still keeping the two divs the same static height to allow for equal heights with different amounts of content in each.
This was the first site I experimented with using a large textual svg in a background image stack. Getting the hero content to always be positioned in the center of the hero div was a struggle. In the end, a lot of the meta content on the site still works for SEO, so I thought it was time to try out just making an svg for the hero content that sat inside the parallax background stack. It ended up being a great solution.