Feb 25 2009


Lasso.Crop Preview

After releasing the “magnetic poetry” demo I have been working hard trying to make the code more reusable for all. In the process there has been a name change from Rubberband to Lasso. The original Rubberband code has been a great source of inspiration, but not much is left of it. I have completely gutted it reworking a lot of the internal logic.

First, the eye candy ;-)

Continue reading “Lasso.Crop Preview”

Tags: , ,

Sep 29 2008


Transitions for Mootools

Transitions provides image transition effects that until now have been limited to flash. Transitions uses css in a creative way to perform the effects. By creating a grid and offsetting the background images in each cell a multitude of effects can be achieved. This script pushes the limits of what a browser can do, and in doing so, it is not an ideal fit in all situations. Use with caution.

Currently, Transitions provides 4 different types of image transitions.

  • Disolve: Parts of the image randomly disappear.
  • Sweep: The picture is removed from a defined point in the picture, the effect spreads out in all directions from that point
  • Blinds: The picture is removed like a blind closing from a direction (left,right,top,bottom)
  • Gobble: Removes a row at a time moving left to right, and right to left zigzagging until the image is removed

Each effect has multiple options, including random. The class itself also provides the ability to randomize the effect.

I highly encourage you to play with the ‘animation option’ on the top of this blog to get a better idea of what each effect does. I strongly suggest that you do not turn on the fade option unless you have a very modern computer. The save button will save your settings in a cookie, and restore the effects to your liking the next time you visit this blog.

Click to Download Transitions for Mootools 1.2

Requires: Mootools Core, Assets

I will have a follow up post shortly that will provide documentation and examples.

Upcoming Features:

  • Standard Fade ( for completeness )
  • Randomize image rotation option
  • Add Events for better control and features
  • More Transitions!


View Demo

Tags: , ,

Sep 26 2008


MooCrop update

I have been amazed by the response I have received since releasing MooCrop. I’m slightly embarrassed that the project has suffered from decay over recent months. I have been insanely busy working at a startup and the thought of looking at more code at home made me nauseous. Over the past few months I have been able to get a handle on the various projects and look forward to being more active in the community.

With all that said I would like to thank Rok for putting in the extra effort to update MooCrop to run with Mootools 1.2. In addition Rok added ratio constraints, a feature that should make many happy.

All the documentation at http://www.nwhite.net/MooCrop/ and examples still apply.

An example of using the new constrainRatio option.

new MooCrop('crop_example', {
       'constrainRatio' : true

Click to Download MooCrop for Mootools 1.2

I have had several requests for the php code that I used in the final example to perform the crop. Below is the listing of the code. Its a quick an dirty hack but should provide a place to start.

$w = $_REQUEST['w'];
$h = $_REQUEST['h'];
$x = $_REQUEST['x'];
$y = $_REQUEST['y'];
header ("Content-type: image/jpg");
$src = @imagecreatefromjpeg("images/moo.jpg");
$im = @imagecreatetruecolor($w, $h);

More enhancements will be added to MooCrop in the near future.

Tags: , ,