One thing I really like about Apple’s website is the smaller effects they add to it. And despite the really misleading pictures of the new iMac (I wish it was a half an inch thin!), I really think the animated bar charts are one of those tiny effects that can liven up a site. One thing I like about Apple’s effect is that it doesn’t trigger until you scroll down and it comes into view. Because otherwise the effect would be pretty useless. Now the question I had was how do you trigger the effect? Apple doesn’t use jQuery, they use vanilla JavaScript and CSS3 transitions. And it’s a lot simpler than you might think.
First the relevant HTML:
1 2 3 4 5 6 |
We have four bars and to start off with all their widths will be set to zero. Then when it comes into view, we use JavaScript to add a class of animate to the ul which will set the widths for each bar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .bar { height: 50px; background: #00d; width: 0; transition: width 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); } .animate .one,.animate .two { width: 100%; transition-delay: 300ms; } .animate .three { width: 50%; transition-delay: 210ms; } .animate .four { width: 25%; transition-delay: 100ms; } |
We add a transition delay on each bar just to give the transitions a more interesting effects. The HTML and CSS are pretty simple so let’s move on to the JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var ul = document.querySelector('ul'); var ulTop = ul.offsetTop; var winH = window.innerHeight / 2; var inView = ulTop - winH; function animate() { ul.classList.add('animate'); } function checkPos() { var top = document.documentElement.scrollTop || document.body.scrollTop; if (top > inView) { animate(); } } document.addEventListener('scroll', checkPos, false); |
Not that much JavaScript here, we grab the ul and use offsetTop to see how many pixels from the top of the page it is. Then we get the window’s height and divide it by two. Finally, we subtract winH from the ul’s position so that we’ll know when the ul is in the middle of the viewing area. We add an event listener for when the user scrolls. We use scroll as opposed to mousewheel or something similar because we also want to check if the user is scrolling down the page using the arrow keys or page down. The only tricky part was finding the variable top in the checkPos function. You’ll notice the line of code:
1 | var top = document.documentElement.scrollTop || document.body.scrollTop; |
The first one, document.documentElement.scrollTop is for Firefox and document.body.scrollTop is for Webkit. If you don’t set both, document.body.scrollTop will return 0 for FIrefox and vis versa for Webkit. Finally, if top is greater than inView, we call a function called animate where we add the class of animate to the unordered list. When the ul is given the class of animate, all the widths of the bar divs are set and we get our animation.
This is one of the things I love about CSS transitions, we can do this with a few lines of CSS and a few more of JavaScript. And it really helps to give some life to a normally static web page. I must admit, the front end developers at Apple are some of the best when it comes to effects like this.