The trick to how the effect works is that it’s powered by CSS but it uses JavaScript to trigger the effect. And the CSS it uses are translateX, transitions and animations. The animations are used to create a fade effect when the slider moves more than one “slide”. I’m not going to go step by step on how to build this, I’ll just go over the key parts and then if you really want to build your own version, you can go through the demo I’ve created. Here’s our basic HTML:

First off, anytime you use 3D with CSS, then you need to set the perspective:

A div with the class box-wrapper is the wrapper div for everything. The perspective property is set to 600 pixels, which essentially means the content is 600 pixels away on the z index. Next, the perspective-origin property is set to 2000px on the x axis and -200px on the y axis. This sets up the view that the user has. Next, we need to set up our transform-style:

Inside box-wrapper is a div with the id of box-container. I’ve set the transform-style to perserve-3d. There’s only two options, perserve-3d or flat, the first says everything should be positioned in 3D space, the other positions everything on the same plane as the container element.

Now it needs some JavaScript to set up the translateZ property of all the divs. The reason I decided to use to set all the z axis positioning on the divs is mainly because it allows you to add or remove divs without worrying about setting anything for them manually.

First thing this does is set the translateZ property of the box-container div to 0. Next, the boxes array contains all the divs with a class of box and in the loop they are all given a translateZ value that’s 400 less than the previous one.

The basics to how this works is this, there’s four divs, the first one is 0, the next -400, then -800 and finally -1200. To get the moving through 3D space effect, the box-container div’s translateX value is changed to be the same as the one we want to see, so if the 3rd one is selected, it will be set to -800 and that div is the one in the view port. To trigger this effect, the translateX of the box-container will be set depending on what link is clicked:

There’s one other effect that really helps flesh this out and that’s when the user clicks on a div that not the next div, say they click on div 3 when they’re currently on div 1, there’s a nice fading animation to make it look like the user is moving through the other divs. First the animation:

So this just fades the div in to 40% opacity and then back to zero to add to the transition effect. To add this effect, there’s a class called transition:

What happens is that if the user is going from say, div 1 to div 3, then div 2 would have the transition class added to it and you’d get that fade effect. But there’s one problem, once a CSS animation is fired, there’s no way to restart it. This was the part that caused me the most problems but a quick search lead me to CSS-Tricks, where of course Chris Coyier had the answer. The solution is that you have remove the element and then add a new version of it. Luckily, that only takes 5 lines of JS:

This code gets the element, clones the element and then replaces the element with the new element. This allows use to reset the animations.

Poke around the code in my demo. I didn’t use jQuery because A) Google didn’t on their site and B) because I want to make sure that I don’t rely on jQuery for everything. I made my demo to work in Firefox and also future proofed it to work in the other major browsers for the one day when they include 3D transforms.

One other thing, in at least my version of Chrome, the dev channel on Windows 7, you can’t click on either of the back two divs, in my version or on android.com. The same goes for Firefox. It does let you click on them in Safari, so I’m guessing this is a temporary bug but one that really make using this on real sites impossible, hopefully it gets fixed soon.

Imagine this, I’m working along, getting this idea I have to work in Chrome, but the site I saw that inspired my idea only works in Chrome. And then I see that CSS3 3D transforms now work in Firefox 10. So I start messing around and seeing I can get this to work in Firefox. I’m using CSS3 tranforms, but I’m using JavaScript to set the CSS and the first thing I discover is that while the Webkit version makes sense:

The Firefox version does not. You’d think it would be this:

But it’s not. That won’t work, you have to capitalize the m:

I only found this out be Zachary Johnson did some digging and as far as I can tell, this is the only mention out there about how to properly write it. Problem solved now, right? I mean all the demos using CSS3 for Firefox that have translateZ working fine. But my test still wasn’t working and in fact I wasn’t even sure you could use CSS transition on the translateZ property in Firefox. It turns out you can but not if the CSS property is set as an inline style with JavaScript, which is needed for my idea to work properly. So the transition works right if it’s CSS but not if it’s JavaScript powered in Firefox. And in Chrome, it works both ways.

I’m still going to redesign my site because even though the 3D effect will only work in Chrome, at least right now, I’ll still get a fade in and out effect in the other browsers. The main traffic going to my site is web designers and developers and since over 40% of them use Chrome, a decent amount of visitors will site the site the way I intend them to. I’m sure Firefox will add the missing functionality sooner than later, so I’m not too worried about them missing out.

Cutting edge effects are pretty sweet, but you better have the patience to deal with the differences between browsers. Nothing can be more frustrating than when something isn’t working because the browsers use different syntax.

You’ve probably heard of the clearfix hack. Honestly, it took me a while before I started using it, mainly because for the longest time I followed the advice that you shouldn’t use hacks in your CSS. But eventually, I saw how many developers that I looked up to were using and I will admit, it made things a lot easier. At the same time though, it is still a hack and it’s the kind of thing that the flexible box model make unnecessary. At least in the browsers that implement it that is and predictably, Internet Explorer isn’t one that supports it, not even IE9.

So, wait. If not version of IE doesn’t support it and it’s the most widely used browser, then why would I use the flexible box model? There’s two reasons. The first being, I looked at my analytics and saw the IE users amounted to a very small about of the visitors to my blog, and since Firefox, Chrome and Safari all support it, then I shouldn’t have that much to worry about. But what kind of web developer would I be, if I didn’t make my blog display properly in most browsers. I needed a way to know if the browser supports the flexible box model or not.

That’s where Modernizr came in. Like the clearfix hack, for a while I was a bit wary of relying on a JavaScript file to make my site work. But, the more I looked into it and the more I built sites that used more and more JS, I realized the chance of it not loading is pretty low. What Modernizr does is add class names to the html tag of a web page. In my blog’s case, if the browser has implemented Flexbox, the it will Modernizr will add a class of flexbox and, in my CSS file, it will run this (shown without the vendor pre-fixes):

If it doesn’t support Flexbox, then Modernizr adds a class of no-flexbox and this CSS will be used:

I’ve become a big fan of Modernizr and I’m using it on more and more sites. If you’re planning on using it for just one or two CSS3 or HTML5 features, then you can now just download a custom build of Modernizr so it’s an even smaller file to load and run. Use Modernizr and you can start building websites using the modern features of HTML5 and CSS3 that you may have been putting off because you weren’t sure if it would work or not.

The other reason could be imagine if a company that you really liked and used their products, like Apple, and all of a sudden they declared they didn’t like the technology you used to make your living. Then all of a sudden, people in the web community and outside of it, were saying that technology was dead. Imagine if you’re a FedEx delivery person and the post office declares that they have a technology that makes your job no longer needed, not only that, but other people are actively celebrating the end of FedEx. That would kinda suck. Although, really, any person that actually knows anything about Flash, HTML5 and web development knows that Flash isn’t done, it’s just moving on to other things.

I think there’s another reason for the animosity towards Flash. The earlier versions of ActionScript were easier to use and now it’s turned into a fullblown programming language. It went from a scripting language used to make simple effects and animations to a full development platform and some of the early users felt left behind. And now HTML5 and JavaScript is replacing Flash for those needs.

But it has to be funny for some Flash developers to see that HTML5 and JS are being used to create those types of things that Flash was ripped on for for so long, things like animated menus and intros. I’ve already said that I think HTML5 will get the same complaints that Flash got and it already is. Just like some sites are a blank page if you don’t have the Flash player installed, there’s more and more sites out there that don’t have even basic functionality if you have JavaScript turned off.

I’m not saying ones better than the other. I like working with Flash but it doesn’t come up much in my day job, so I’ve been focusing more on JavaScript, HTML5 and CSS3. I just think I understand why some Flash developers can get so worked up over something as simple as Keith Peters posting on his blog about JavaScript.

I thought, “How is that done? It must be jQuery or something.” There’s jQuery being used on the site, but it’s simple stuff that is used for some hover animations and class changes, but nothing about positioning the background. So I decided to check out the CSS. And I was a bit surprised to see how simple the effect was to produce.

To create the effect, all you need to do is set the background’s x position to negative 50% and then when the browser is resized, it will move in the opposite direction. After I saw that, I realized, of course, that’s how you would do it, but I think because I’m so used to see effects done with jQuery or CSS3, that it didn’t cross my mind that it could be this simple.

I don’t know if it’s a bad thing that my first guess was jQuery, but I think that it’s reminded me, that while things like jQuery are great, sometimes there’s a simpler way to do it. If I can do it with CSS and not use JavaScript, then that’s been the way that I’ve tried to go. I’ve been really excited about CSS3 and what it lets me do, but I need to remember that we can still do cool things with the CSS that works in all browsers. And when it’s something as simple as that, it makes it even more interesting.

I’ve made a demo that features some other CSS3 but I’m just going to talk about the Flexbox, as the cool kids call it. It’s pretty simple to start up but there are a couple of things that can be confusing if you’ve never worked with it before. The first thing you do is set the display element:

Of course, as with most things CSS3, we have to use vendor pre-fixes but I’m used to that by now. Now this is where one of the confusing parts can appear. Let’s say you have a container div and you want to center it using Flexbox, you would think you’d put all the FLexbox settings into the container div’s CSS but you actually put it into the parent’s and then all of that element’s immediate children are affected. So in order for our container div to be centered we have to set up the Flexbox in the body tag’s CSS.

This on it’s own won’t do anything but it sets the child elements up so that we can tell the browser how we want them displayed. The example I’ve made has the container div set to be 800 pixels wide and 500 high and it’s going to be centered on the page. We just need to set two more CSS values for that:

First off, I should be setting the box-orient property but it’s default setting is horizontal, which is what we would be setting it to anyway, so we don’t need it here. Box-pack sets the alignment of our div along the axis of what we’ve set the box-orient to. The options are ‘start’, ‘end’, ‘center’ and ‘justify’, we’re going with center. And box-align sets the other axis, so if it’s on a horizontal alignment like ours, it will set the vertical alignment. The options are ‘start’, ‘end’, ‘center’, ‘baseline’ and ‘stretch’. And again, we’re going with center. This will position the container div to always be in the center of the page no matter how tall or wide the browser window is. But, of course, we need vendor pre-fixes, so our CSS will look like this:

Now, some people are probably wondering why you would go to all the trouble of using this many lines of CSS instead of something like:

This would center the div and position it 100 pixels from the top, but the Flexbox module is made to position this and will probably eliminate some of the annoying bugs that happen when we are trying to position multiple divs. There’s a lot more to the Flexbox and you can find out more in Paul Irish’s article on HTML5Rocks titled Quick hits with the Flexible Box Model. It’s perfect if you want to learn more.

There is one thing that really surprised me about using the Flexbox to position a div was how much processor power it used when I was resizing the browser window, actually going up to nearly 100% of both cores at one point. This was in both Chrome and Firefox 4 and I don’t know if it’s because browser makers are still working on it or what, but I’m sure it will improve as developers start to use it on more and more sites.

Would I recommend using this now? Sure, I think you could, but you’ll just have to remember none of this works in any version of Internet Explorer, so you’ll have to set up alternative positioning for it, using either a separate stylesheet or JavaScript.

So view source on the demo page and see how things are set up. There’s some other interesting CSS3 stuff in there and it will work in Firefox, it will look best in Chrome or Safari.

But I was wondering, if there was a difference in using jQuery for animation as opposed to the new CSS3 transitions. When you check out the test page I’ve made, you can see, there’s not really that much difference in the results, except putting in the same numbers in gets you slightly different end positions. And, since we still need to use JavaScript to trigger the CSS3 animation, we don’t really save any lines of code, we just move a couple of lines from JS to CSS.

Seeing that there’s really no difference in the results, I would eventually prefer to use CSS for things like this, when, of course, it’s supported in all browsers. Why? Well, for the most part, 99% of websites we build will have CSS for style and positioning, so creating the animation with a file that’s going to be loaded already means less requests and that’s a good thing. Less HTTP requests means less chance something might not be loaded.

Of course, with Firefox 4 still being in beta and Internet Explorer 9 not supporting CSS3 transitions at all, I think jQuery and JavaScript built animations are going to be around for a while at least. Personally, if I have the time when working on a project, I’d go the same route as Hardboiled Web Design did in his old design (before he went the copy Apple’s nav route so many, many sites go) where he used CSS3 animation to move a character if your browser supported it, if not, he used jQuery.

Most of the JavaScript is pretty straight forward but I was surprised to find out that Google was using a tween library created by someone else, JSTweener. The library was created by Yuichi Tateno.

This is one of the great things about the HTML5/CSS3/JS movement, if you see something that interests you, then you can dig through the code and figure out how they did it. And you can learn a lot when it’s made by someone like Google because you know that some of the best developers out there worked on it.

Not only can you see the JavaScript they used but also their HTML and CSS. I was surprised to see that although they used the HTML5 doctype and the canvas tag, that’s about all the actual HTML5 you’ll find on the page. There’s no other HTML5 tags used. I’m sure this has a lot to do with making the site work in pretty much every browser possible.

If you want want to learn, I can’t think of a better example than something made by Google. I would love for them to put up an example of how to create the same effect on HTML5Rocks.com.

It’s pretty simple, all you need to do is add one line to your CSS:

What’s going on here is that there’s ten text-shadows being applied to the text and each one is one pixel to the right and down more then the last one, which will give us a ten pixel solid shadow because we’ve also set the blur to 0. You can change the angle of the shadow with negative values for the x or y of the shadows.

Check out the demo.

That’s all it takes. This doesn’t work in any version of Internet Explorer, but hopefully it gets added to IE9 eventually. If the effect is really important to the design, you can use some JavaScript to replace it with an image if the browser doesn’t support text-shadow.

I’ve just been messing around with some transitions made a couple of examples of what you can do. You can check out the demo here.

The first example is pure CSS. The animation is triggered by the :active selector which unfortunately won’t let you just click on the div to tigger it. The second example uses jQuery to toggle the a class on and off to trigger the animation. Although I’m using jQuery here, it’s just to trigger the effect, the animation is still 100% CSS.