- Topics:
- apps
- css
- games
- javascript
- mobile
- node
- php
- speaking
- tehcl
- textmate
- tools
- video
- webgl
Topic: javascript
- published:
- 2009.03.22
- topics:
- games
- javascript
When my friend Jesse moved out to California, I made him a little venturing-west game (in the loose sense of the word "game") as a safe journey gift. He was just in town visiting for the last week, which reminded me of the game so I thought I'd post it. The game is built with JavaScript, and I did the graphics except for the flying manatee, which was done by Kamran.
To play, use your right and left arrow keys to move the Viking Jesse and blow up as many flying Manatees as you can. Click the image below to start.
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS Transforms are used to create this visual "3D" isometric effect. Supported browsers are Safari, Chrome, Webkit, Firefox 3.5+, IE9+, and Opera 11+. The plugin's functionality includes: setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.
- published:
- 2009.03.11
- topics:
- css
- javascript
- tools
One of the things I've been spending quite a bit of time on lately has been my new project: rotate3Di, an effect plugin for jQuery. This plugin enables "3D" isometric perspective rotation and animation via CSS transformations. I'm happy to announce the release of version 0.9 today.
Rotate3Di Project
This plugin is somewhat ahead of its time. Not in the sense that I am any sort of visionary, but in the fact that I didn't wait for Firefox 3.1 to be in wide use. Because I've chosen to use native CSS transformations to produce the visual effect, you will currently only see the "3D" perspective using WebKit/Safari or Firefox 3.1 beta. (Update: Supported now in Safari, Chrome, Firefox 3.5+, IE9+, and Opera)
Firefox 3.0 and Internet Explorer are not presently supported, but it does seem within the realm of possibility using SVG and proprietary IE CSS Filters. Though, having gone down this road in IE once before, I will say the behavior is quite different due to element clipping/resizing, a different transform origin, and speed issues.
When the true full 3D perspective transformations move from iPhone Mobile Safari into the desktop WebKit/Safari, I will introduce support for those effects into this plugin as well.
Basic usage of this plugin is very similar to the jQuery animate() method. A usage example and more on what I learned from this project, including jQuery's custom animation system, after the jump.
- 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.
- 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, Firefox 3.5+, IE9, and Opera. Usage example and code after the jump.
