You’ve asked for the code snippets of the Merry Christmallax and in this post I share with you a screencasts related to CodePen examples demonstrating how the site was put together.
The First section – The Sketched Tree
In the first set of the screencasts I am deconstructing the steps taken to build the sketched version of the tree.
You will learn:
- How I did export the assets from Photoshop
- How were the assets optimised
- How I positioned them on the page
- How to set the right skrollr data attributes
- How to work out the right timing for scrolling animations.
See the Pen Merry Christmallax – Skrollr.js animation by Petr (@ihatetomatoes) on CodePen.4864
1. From PSD to HTML, CSS [13:37]
2. Skrollr data attributes explained [13:12]
3. Skrollr fade in/out animations [10:10]
Conclusion
If you have enjoyed this deconstruction, you will find other useful info in The Making of Merry Christmallax ebook.
I would also love to hear your feedback on my first screencast/CodePen combination. Have you find it useful? Or did I miss something?
Please leave a comment. That will help me to make even more useful content for you in my future posts.
Like What You're Reading?
Sign up to receive my future tutorials and demos straight to your inbox.
No spam, Unsubscribe at any time.
This blog really help me by showing my own animated life story. ^_^ i plan to create an airballoon to animate it. that traveling around the world displaying the best tourist spot that i want to reach ^_^ just a dream hehehe ^_^
Hey David, just a dream? You’re smart enough to give it a go and send me the link when your life story is live.
Great screen cast!! Very well done for first time, it was well explained into the details. Love it!! Cant wait for the next part to finish off the Christmallax project! Thumbs up Petr, keep on going!!
thx Petr Tichy for the awesome tutorial:)
First time I worked with skrollr.js I ragequit because the data-attributes just didn’t make sense to me (beyond simple animations). This tutorial has been very helpful–especially in combination with CodePen. Thank you so much!