Just built a fancy parallax scrolly thing for the company website.
It's here, although considering how fast our industry updates its websites, it may not be there for ever. Its aim is to give an overview of what the company does, while simultaneously showing off a good grasp of the technology. The look and animation was designed by one of our in-house designers, who I worked closely with to ensure the final product closely matched the original concept, both in terms of appearance and animation timings.
It's built using a lot of JavaScript and mostly CSS3 effects to do things like the circles - images are only used where they're obviously needed.
The page uses the skrollr plugin to provide the animation functionality, although I had to do a lot of work on top of it to fulfill the requirements. For starters, events in skrollr are based on the numerical scroll position of the page. That means if you want to change the timing of the 1st animation at any point, you need to then increment all the ones that follow it to prevent them being overlapped. From the start I realised that there are so many different animations and fiddling with the timing would be the most argued over aspect of the project, so I wrote a simple framework to stack each animation on top of the previous one. That way if the timing of the first animation was lengthened, all of the others would simply shuffle down to fit after it rather than causing an overlap.
The other big challenge was that they wanted this page to work, within reason, on mobile devices. That seemed straightforward until I realised that a lot of the content depended on a specific aspect ratio to fit together correctly - like the circles. These elements, along the a lot of the fonts, would need to scale with the screen size. The solution I came up with was to fit the animation into a letterbox like wrapper - something that would always maintain a specific aspect ratio and provide an anchoring point for everything within it to scale to. Fonts and specific elements are scaled to fit the letterbox. It does mean that some users will see small black bars above and below the screen, or to the left and right, but generally it should encourage those on smaller devices to use landscape, not portrait.
Overall then, an interesting and more complicated challenge than initially thought, but one that I very much enjoyed putting together.