Quite often (ok, let’s say daily), I find myself browsing online award sites like Awwwards and CSS Design Awards for inspiration and coding ideas; typically, most of the nominated sites are quite fundamentally similar, boasting a ‘trendy’ albeit minimalistic interface, cute animations and a tidy parallax scrolling effect. So when my brother asked me to develop his portfolio, I wasn’t surprised when he wanted a similar effect of his own.
Nowadays, most people have a mouse or touchpad which enables them to easily scroll down on webpages, without the need to manually click the scrollbar. However, any solution would need to continue to work even when this was not the case, so therefore I enabled my solution to work with the directional arrow keys on the keyboard and through the click event of an element.
There already exist a few solutions such as Scrollorama, but when searching for solutions which “take over” the scroll event entirely – the list of feasible solutions that would integrate well with other effects is much smaller. Therefore, I went about creating a custom script which enables complete control of the scroll event, but would also integrate easily with any desired transitional effect. You can view my solution here.
Furthermore, the way my solution has been implemented enables for a non-javascript compatible view, as all styling and animations have been handled by CSS, re-arranging the layout is simply a matter of re-configuring properties based upon a determinate class, such as html.no-js. On a side note, be sure to check out Modernizr and has.js for some great client-side feature detection.
I chose to utilize CSS3 for the transitional effect between the frames. As CSS3 animation steps are rendered directly by the GPU, they are inherently faster and help to create a smoother effect. Whilst animating elements with CSS3 is not backwards compatible, it is still possible to conditionally fallback to Javascript-based animations when necessary. However, that is outside the scope of this post.
The full solution is available here: http://jsfiddle.net/davidkelley/MGxC4/7/