Super Rock-n-Scroll Animation
Text and images that animate as you scroll have been a feature on a number of sites including some high profile commercial endeavours. Using JavaScript it is easy enough to the alter the regular page response from typical up/down scrolling into a smorgasbord of multi-directional spinning, fading and zooming. All initiated by the humble scroll bar.
Below you will find some examples of this and I will update this post with more whenever I find one worth posting.
I’ll also post up code snippets and document my own attempt at creating such a site. I will also try to build in slightly better usability options which a lot of these sites fail to do.
Animation effects - JS resources
It’s worth noting that all these techniques are browser specific and may break in unsupported browsers - they are not guaranteed to ‘fail silently’. Subsequently these resources are not recommended as being best practise. It is normal practise for example to provide a different UI experience for smartphone and tablet users. Of all the examples above only the Beetle site provided a distinct smartphone experience. All the rest failed to provide a responsive design which meant viewing the site on a handheld touch device was at best horrible, and at worst unusable.
Over the coming weeks I will do some investigating and further document my findings here.
In the meantime explore some of these links:
Scrollarama!
Lateral on-scroll sliding with jQuery
