Sometime recently I wanted to make some sweet-ass parallax stuff. Fun times would be had, but what a lot of effort it was going to be.
There were several great solutions out there, and I eventually decided upon jparallax as being the most complete. However, that still didn't allow me the flexibility I wanted - I needed to be able to do more than just move elements, I wanted to stretch parts of my parallax to achieve faux-sideon perspective. And then I started thinking about other things you could do, and decided the best way to approach such an engine would be to allow modification to any css property and decide what effects were workable later.
I will be back to document this later, but for now I hope the flexibility of JCAnim's design is evident in its source code. The engine allows extension via a fairly comprehensive API:
- Addition of custom input and output handlers, allowing JCAnim to respond to other events I haven't thought of yet and to manipulate other CSS properties easily. The library should be future proof enough to use with any new technologies as they are implemented. Custom callbacks can also be used to determine the movement range of new CSS properties on target layer elements, allowing complete automation of new animations as with the core set.
- Binding of multiple viewport & layer controllers to the same elements, allowing combinations of parallax effects, cumulative parallax when hovering over certain areas etc (i.e. windows within windows).
- Flexible enough to allow parallax instances with different framerates to access the same elements.
- Contain update methods for recalculating cached coordinates used in computations so as to allow other movement of its DOM nodes whilst operating.
- Multiple input & output animators per layer, with separate ranges and animatable attributes
Looking under the hood: JCP-TransitionInterval
All in all it seems to be a pretty effective way of running animations, and I hope it starts to see some wider use once I finish it off!