slow clap

I developed the site but we have our amazing head of design, Skyler, to thank for the beautiful layout.

The First1000 site is entirely native javascript/html5/css3. No jQuery or frameworks. I believe that frameworks are fantastic but only if you are utilizing their full potential. In the past I've included jQuery for random bits and pieces but I found myself coding around it and I really don't like including a library where I only use a couple of its functions.

Here are some of the cool things we included.

Multiple background images in CSS3. This is a beautiful thing. We should rarely have to nest divs inside divs to achieve a layered background effect now.

Transitions (Webkit, Mozilla, Opera etc have their own implementations) for most of the animations you see on the site. I found myself using the transiton-delay: property a fair bit too. This is really helpful as you can set a delay before the animation start point. Using delays is how we make the flip cards start from the top left and gradually flip over to the bottom right. Each group of flipcards (diagonally) are given a different transition-delay. We transition opacity, width/height, top/left positioned coords and background-colors.

We use Transforms to achieve rotation. Each card has a slightly different angle ranging from -3deg to 3deg. If I had NOT been using transforms then I imagine each card would have been a nightmare to implement at an angle like that. It would have taken forever and I would have had to use images for the text. Thankfully you can transform an entire div (and its contents, of course) with ease in CSS3.

As you scroll down the page you'll notice the switches on the right highlighting depending on which card you are viewing. jQuery has plugins for this kind of thing (to see if an element is visible in the current viewport - http://remysharp.com/2009/01/26/element-in-view-event-plugin) but I thought it would be a nice challenge to achieve this effect with native javascript.

For things like numeric figures ascending from 0 to 5700 (for example) I used javascript's setInterval() function with a very short interval adding +10 to the innerHTML of the container. The loop breaks and clearInterval() is called, stopping the loop when the desired number, 5700 is reached.

I used a lot more absolute positioning that I would like to, but it worked out very well.

Transparent PNGs positioned above each card give the 'noise' effect.

I took advantage of lossless PNG compression (using Google Page Speed), and minified our CSS and Javascript.

Other cool things like text-shadow to make text appear to be slightly raised, or impressed always come in handy too.

Thanks :)