- All Topics:
- apps
- css
- dashboard
- games
- javascript
- php
- tehcl
- textmate
- tools
- video
Topic: video
- published:
- 2010.07.28
- topics:
- css
- javascript
- video
Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.
Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.
Take a look at my rotate function:
function rotate()
{
volumeEl.style.WebkitTransform = 'rotateX(' + rotX + 'deg)'
+ ' rotateY(' + -rotY + 'deg)'
+ ' scale3d(' + scale + ', ' + scale + ', ' + scale + ')';
i = starSpans.length;
while (i--)
{
starSpans[i].style.WebkitTransform = 'rotateY(' + rotY + 'deg)'
+ ' rotateX(' + -rotX + 'deg)';
}
}
The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!
- published:
- 2010.04.27
- topics:
- css
- video
I was feeling inspired after seeing the cool pure CSS pulsing rings on the Transmit 4 website that launched this morning so I put together this demo. (Did you notice the rings? You had to browse there with Safari to see them.)
Check out my pure CSS map markers live demo in Safari or Chrome.
- updated:
- 2010.01.18
- published:
- 2010.01.17
- topics:
- apps
- video
I lead the team of people for Student Unions & Activities at the University of Minnesota who built this touch screen building directory installed in Coffman Memorial Union. The directory is a web app running in WebKit on a Mac Mini attached to a touch screen monitor. No Flash was used. Many of the graphic elements like the panels and buttons are generated entirely with CSS3. The 3D floor diagrams were created with Google SketchUp. Here's a first look at the project which launched early on Friday, January 15th:
We used a usability test driven design process. We were able to completely redesign portions of the project in the week before it launched based on direct user feedback. We are continuing to test and make iterative improvements to the directory. Special thanks to the totally epic team that made this possible: Ellie, Ethan, Kamran, Ken, Sungho, and Trent. My role included project management, creative direction, information architecture (IA), core PHP and MySQL work, as well as JavaScript work on the drag-and-drop administrative tool for the map data.
- published:
- 2009.12.02
- topics:
- css
- javascript
- video
FlipBox is another LightBox clone (a JavaScript photo gallery tool) where the new twist is a fun "3D" tile flipping animation effect. It is much easier to demonstrate than to explain, so I decided to do my first screencast with audio (be gentle!) so I could show you what FlipBox is all about. Incidentally, Mac OSX 10.6 Snow Leopard has a great free screen capture tool built into QuickTime. Sorry in advance if the volume is a little low. Real action starts at 0:45:
More About FlipBox
FlipBox is jQuery-based and makes use of my rotate3Di plugin to create a 3D-like isometric tile flipping effect using the CSS3 transform property currently only supported by Safari, Chrome, and Firefox 3.5+. (That's another reason why I wanted to record a video demo.) If you happen to have an awesome web browser, you can check out a live demo of FlipBox.
In it's current state, with only a little preparation by the user, FlipBox is already a simple to use LightBox-like tool. There's a few other demos with this concept I hope to put together, and I would also like to write proper documentation and do a release.
- published:
- 2009.10.20
- topics:
- video
In the spirit of Halloween, I wanted to post this zombie-themed video commercial for the Gopher Express convenience store. I did much of the writing, directing, and editing for the video with a lot of help from some very talented people. I was definitely making a deliberate nod at director Edgar Wright's work on Shaun of the Dead. I think it shows.
My zombie vide is titled, "Luuuuuuuunch." Watch it now!
I was extremely honored when this video won a Communicators Forum Maroon Award in the "electronic media, video" category in 2008. The video was also submitted this year to the Zombie Short Film Festival in Toronto. With some luck, my co-creators and I will be able to add a "double award-winning film" to our resumes.
[Fingers crossed.]