A trend I’m seeing for the coming year is the rise of Transitional Interfaces on the web. A fine example is the aforementioned Fluidbox, or this interface (extract from the post linked): Sparked by the post linked — which you should read — I started goofing around with CSS transforms and transitions a bit. The …
Tag Archives: animation
Skrollr – CSS animations linked to scroll position
Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr …
Continue reading “Skrollr – CSS animations linked to scroll position”
Scroll Animations
A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view. Check out this Pen! Note that the event handler is not debounced as we need …
CSS Mac Plus
Check out this Pen! In this project I will build a 3D model of the Macintosh Plus and display it in a three dimensional setting. Using CSS Keyframe animation we’ll make it move on screen to show off the 3D effect better. Great explanatory post on how to actually make this kind of stuff. Touches …
John Lewis ‘The Bear & The Hare’
High Performance Animations
Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop …
CSS Animations: Using animation-fill-mode
Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. …
Continue reading “CSS Animations: Using animation-fill-mode”
The Scarecrow
Wonderful animation to promote the game “The Scarecrow”. In a dystopian fantasy world, all food production is controlled by fictional industrial giant Crow Foods. Scarecrows have been displaced from their traditional role of protecting food, and are now servants to the crows and their evil plans to dominate the food system. Dreaming of something better, …
Jake Archibald – Rendering without lumpy bits
Right, we’ve got a new project, we have to calculate and draw 500,000 pixels, and the deadline is in 16.67 milliseconds. When we’re done, we’ll do it again, and again. Web performance has always been about delivering those pixels on time, but the target has shifted. Optimising pure JavaScript (loops, string concatination, arithmetic) is more …
Continue reading “Jake Archibald – Rendering without lumpy bits”