CanvasReflection, JavaScript, Canvas von Finn Rudolph
I was always interested if the pixel based canvas element is fast enough to provide client-side image reflections. This is my first experiment on that topic. You can try the demo and download the whole thing from GitHub.
Reflections are pretty simple with the canvas element (18 lines of code): Just create a canvas and set the height to the source image height plus the height of the reflection. Then draw the source image and a mirrored source image. Place a gradient over the mirrored image and set the globalCompositeOperation to destination-out.
The problem is, that if you want to scale the canvas you have to redo all the canvas drawing, since it is pixel based.
Icons by: FastIcon.com
Update: Also works nicely with eleven transparent PNG images.
Dragonfly von Finn Rudolph
On June 25th, between two and five o'clock am, this website may be down for some minutes. The webhosting-provider ALL-INKL.COM is doing some maintenance on its network. Sorry for that...
ImageFlow, JavaScript, CSS von Finn Rudolph
There is a new ImageFlow version featuring the Slideshow and Circular mode everybody was waiting for. They come with a bunch of options that enable you to customize the behaviour of ImageFlow as you prefer.
They also "play nice" with the previous options. Which was especially tricky to achieve with the circular feature. I had to clone some of the images to make the illusion of an circular animation possible and thereby changed the number of images. That had an impact through the whole code (just search for 'my.circular' in the imageflow.js if you are curious what had to be touched ;D).
I also implemented some other options that came up in the shoutbox often: With animationSpeed you can now slow down the animation for extremely small images. And the path options imagePath and reflectPath enable you to put the reflect_.php files where you want. And it is now possible to display only one image in ImageFlow without crashing the IE. Enjoy!
GitHub, Git von Finn Rudolph
Since I started using the Git revision control system a while ago, my projects are now also hosted at GitHub: github.com/countzero
So if you want to take a deeper look into the codebase behind projects like ImageFlow and JavaScriptObject "check them out" ;D
github.com/countzero/JavaScriptObject
github.com/countzero/ImageFlow
JavaScriptObject, JavaScript, CSS von Finn Rudolph
There is a new JavaScriptObject package that comes with some code improvements and a new option called lock. If activated the rotation will be locked at the given boundaries: One can only spin the object around one time and not infinitely. Check out the locking examples and if you're interested in the codebase feel free to take a look at the github repository of JavaScriptObject.