Typhographic is a open source packaging
of some of the technology in iBlipper, the iPhone app.
Standalone Windows/Mac/Linux
of some of the technology in iBlipper, the iPhone app.
Standalone Windows/Mac/Linux
|
Typhographic is a open source packaging
of some of the technology in iBlipper, the iPhone app. Standalone Windows/Mac/Linux |
Declarative Animation JS/CSS Library for iPhone
Create a set of DIVs on your page with single words or short strings and typhoGraphic will animate them sequentially using iPhone / webKit CSS Transform animations. View the demo on your iPhone or recent Webkit build. Video and background here. A few effects only work on the iPhone (including 3d it seems).
The animation parameter is mapped to a CSS style name. Duration specifies the animation length in milliseconds and Start allows you to delay or accelerate the display of the next animation.
<div animation="zoomin" duration="2000"> Word <div>
<div animation="topbounce" duration="2000" start="-200">Up<div>
Check the CSS file for the full list of supported effects and how to add your own. Highlights include zoomin, zoomout, slide, wiggle, waggle, wobble, shake.
The code, both JS and CSS, are released under the Mozilla Public License, requiring simply that you give back any modifications made within the typhographic.css or typographic.js files. Otherwise, have fun!
The current functionality is just the tip of the iceberg and I'm opening this up to the MPL in hopes that others will help me take it further. Similar code is used in the iBlipper.com iPhone web app.