- All Topics:
- apps
- css
- dashboard
- games
- javascript
- php
- tehcl
- textmate
- tools
- video
- published:
- 2009.03.04
- topics:
- games
- javascript
In both film and computer graphics, the illusion of animation and motion is created by rapidly displaying a series of slightly different still images. This illusion starts to break down for most people somewhere below 30 frames per second (FPS).
The minimum distance an object or image can move in a web browser is one pixel, and the size of a pixel is still large enough to be very much perceptible in most situations. As a consequence, in order to produce smooth, fluid motion, an object moving one pixel at a time must move 30 pixels in one second in order to achieve 30 frames per second animation. That's surprisingly fast movement.
The noticeable stop/start ticking motion of objects moving slower than 30 pixels per second in a web browser has always bugged me. Take for instance my example of parallax scrolling animation of clouds in a sky. The foreground clouds are moving 10 pixels/frames per second. The motion looks good (though not great). Compare this to the background clouds which are moving two pixels/frames per second. They are very jerky. View the example after the jump.
- updated:
- 2009.02.23
- published:
- 2009.02.22
- topics:
- css
- javascript
I thought it might be nice if jQuery's css() method would internally reconcile browser differences with CSS Transforms just like it reconciles differences with for example the opacity property. I am currently supporting CSS Transforms in WebKit/Safari/Chrome and Firefox 3.5. Usage example and code after the jump.
- updated:
- 2009.02.20
- published:
- 2009.02.02
- topics:
- javascript
- tools
When it comes to picking a width for my web designs, what I really want to know are the common browser window dimensions for a visitor. Google Analytics tracks screen resolution, but this is increasingly meaningless with the rising popularity of super high resolution wide screen monitors. Most websites these days are 1024 pixels wide or less, thus my browser window is generally about 1000 pixels wide. Every so often I visit a website that is setup for a 1280 pixel wide screen, and even though my widescreen monitor is much higher resolution than this, it really annoys me to resize my browser window. I don't want to hassle my visitors by being the only website they visit that forces them to resize. I will show you how to track the browser window dimensions (actually, the inner window viewport dimensions) for your visitors in Google Analytics. Update: Thanks to Paul for giving me a kick in the rear to fix a bug with listening to resize events.
- published:
- 2009.02.18
- topics:
- css
- javascript
I started a new project just for kicks: the Birdmanizer. It is a tool which loads any website and animates it into your browser view using the "cinema newspaper" (or perhaps "spinning vinyl") style CSS effect I mentioned in my earlier blog post on CSS Transforms. I was inspired by the cut scenes in the original Batman TV series, as well as the cut scenes from the Harvey Birdman cartoon series — where the project gets its name and audio clip.
- published:
- 2009.02.17
- topics:
- css
- javascript
WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. The Firefox 3.1 betas also now have CSS transformations. These CSS properties can also be animated with JavaScript, although finding documentation for how to do it in Firefox 3.1 was a bit of a hassle. Let me show you how it is done.