How to create a Site of The Day

Merry Christmallax deconstructed – Screencast

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.

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.

Parallax Scrolling Master Class

5 thoughts on “Merry Christmallax deconstructed – Screencast

  1. David Gualvez

    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 ^_^

    Reply
  2. Petr Kolarik

    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!!

    Reply
  3. sdnyco

    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!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>