Owl Studios

Long-scrolling One Pager for digital duo Owl Studios featuring a fun owl animation and even funnier team section. Thanks so much for these awesome build notes!

The build was very much an experiment with CSS transitions triggered on both page-load and scroll. I built this website after building Club of the Waves, and after both experiences, I wrote this article, since I'd spent so much time thinking about 'bringing a website to life. We also had fun with our 'brand mascot' โ€” animating the owl to turn its head and wink. That was simply done using a PNG sprite and CSS. The hardest thing to get right was the timing of the two images and the "OWL" letters. It took a lot of tweaking and refreshing the page to get that feeling right as the page animates! And the change of background as you scroll to the bottom of the page was really just for 'interest'. We don't want the user to be too fatigued by the same white page and columns of text, so the little burst of colour makes it more interesting as you progress down the page.
Categories Portfolio
Typefaces Source Sans Pro
Landing Page Hot Tips Ebook
Strengthen your Landing Pages with 100 Hot Tips, audiobook and interactive launch checklists ๐Ÿ”ฅ
Email Inspiration? Check out Email Love ๐Ÿ“ฌ