Here’s a recent site gone live. Congrats Vibrant! Turns out, my brother has worked with Chris and Ellen for years and we only realized right before launch. What a small world it really is. I helped produce this one-page solution with portfolio and an interesting suite of animations all done the css/javascript way and based on user scrolling input. Working with Kindred Development, I developed a Wordpress solution that includes a custom theme and utilized the Skrollr paralax scrolling javascript library.
Here, we used Skrollr to create very subtle animated effects. But do take a look at the power of Skrollr. With very straightforward html syntax to signify key frames, you can create your scrolling animations. A lot of possibilities here, but I do like the idea of those very subtle effects, think moving backgrounds, css color changes, zoom levels, I’m thinking the Ken Burns effect in html5.
Development Firm: Kindred Development
Website Design By: Bobira
Website: Vibrant Design
Take a look at some of the examples on Skrollr…
Get on it at Git and check out the code and examples
https://github.com/Prinzhorn/skrollr/tree/master/
Animating SVG Paths! Very cool.
http://prinzhorn.github.io/skrollr/examples/path.html
And the syntax is intuitive. Take a look at the documentation https://github.com/Prinzhorn/skrollr#documentation
The key frames are defined as absolute values describing how much the document has been scrolled down. The syntax is data-[offset]-[anchor], where offset can be any integer (0 is default) and anchor can be either start (default) or end. Either offset or anchor can be omitted in some situations. Here are some examples of key frames and their meaning. data-0 = data-start = data-0-start: When the scroll top is 0. data-100 = data-100-start: When the scroll top is 100. data--100 = data--100-start: When the scroll top is -100 (sounds like nonsense, but keep in mind that interpolation will be relative to this point). data-end = data-0-end: When offset is 0, but counting from the bottom of the document instead of from the top. In short: when you reach the bottom of the page. data-100-end: 100px before we reach the bottom. data--100-end: 100px after we reach the bottom (again, it's up to you whether you need it).
