Is your Pixelpost template available anywhere?

Unfortunately no, and that for two reasons:

1. Because coding it took me nearly 100 hours of work and, as the pictures, it is part of my identity.
2. Because I had to patch up my Pixelpost a bit and it won’t be compatible with the standard version.

One of the most frequent questions is “How did you achieve the comments sliding panel?“.

It is very difficult to answer this question because it is web coding and you need to have some quite strong knowledge about HTML, CSS and JAVASCRIPT.

Luckily, not all has to be done because I’m using the MOOTOOLS javascript framework; this tremendous library can do a lot of thing but I only use animation effects and more technically the Fx.Style class. This class take care of interpolating values between the start and the end value of a CSS property. What is this gibberish? This is simple and very powerful, lets say we have a DIV tag with a width of 300 and at the end of the animation I want a width of 600. I simply ask to the mootools function “animate this DIV from 300 width to 600 width”, you can even chose between “transition styles” (like linear, elastic, etc.). This class can drive any CSS property, so I let you imagine the possibilities…

Here is a very simple example of how I did to have a “smooth” background color change: demo • source

Unfortunately I don’t have enough time to speak more about that and it would be useless because the creators already took care of that.
On the MOOTOOLS website, you will find an expanded documentation and excellent examples.

Share This

This entry was posted on July 19, 2007 and is filed under Frequently Asked Questions. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.