Nanny Dunkelheit is an interactive storytelling experience inspired by a game I am currently developing in Unity. The user can click on certain elements of the page to trigger audio and animations.
Nanny Dunkelheit was created in vanilla JavaScript, CSS3, HTML5. It was built in Sinatra for the purpose of implementing the Sendgrid API. The images were created in Photoshop CS5 and the audio was edited with Reason and Audacity. The individual audio pieces are public domain and were sampled from freesound.org.
For this animation I used the Transform property to manipulate the scale and the X,Y position. I included -webkit-backface-visibility: hidden; to address flickering issues.
Second type is a Sprite animation which is little more involved. Instead of using transform the keyframes are changing the background-position.
For these kinds of animations some math is needed!..but only some ;). Here I have a sprite sheet which illustrates how I want the animation to move.It is important to make sure each "frame" is exactly the same width , that the illustration is in a fixed position within the "frame" and the illustration does not exceed that frame. If not you will end up with a wonky animation that appears to be shifting while animating or clipped.
Once I finished with the sheet I got the width of each "frame" in pixels. I created a div with the width of that number and the height of my sprite sheet. In the animation property I set steps to one less my total frames and set my final keyframe to the length of the sheet minus one frame. This allows the animation to end on the last illustration and not the return to the first. If your math is wrong you will see each illustration zip through the CSS element.
As mentioned above there were no libraries used in building this project. All functionality was created with pure Javascript. I used onScroll to trigger most of the animations and audio. In the below example the animation starts when the User scrolls between a short range of pixels. As I learned early on in the creation of this project is that onScroll works with < > comparison operators and not ==. So I did a range of 100 pixels to check for.
This was fun for me to figure out. I wanted to create the "typing" affect but 100% from my own head. After some thought I came up with this solution.
