Sep 30 2008

1

Sliding Text Animation

All too often from clients and friends I get requests to add something 'flashy' to their site. I have found myself in the position way too many times arguing against flash, when in fact my audience doesn't care. I have resorted to the answer "Sure" just to please them. More often then not I just create the effect using javascript. The result being that they don't even know it isn't even flash.

This will be the first of many in a series of what I'll refer to as "I can't believe its not flash!" :D

Recently, I had a request to create a text animation when you rollover a particular piece of text. This effect would add each letter in one by one with a specified delay. I created a class called 'SlidingText' with Mootools.


First the CSS:
#slidingText {
        padding: 0 0 0 0;
	margin: 15px;
	font: 14px Arial;
	list-style-type: none;
	cursor: pointer;
	width: 200px;
}
 
#slidingText li {
       text-transform: uppercase;
       margin: 5px 10px;
       padding: 0 0 0 0;
}

The main thing to note about the css is the elements we are going to animate ( 'li's ) have a defined width. By doing this we remove any bouncing or any other weird effects when we manipulate the DOM.


The HTML:
<ul id="slidingText">
 <li>javascript</li>
 <li>mootools</li>
 <li>text effects</li>
 <li>sliding text</li>
 <li>this is not flash</li>
</ul>

Next the Javascript:

Make sure you have included mootools, and SlidingText.js (download link below).


window.addEvent('domready'), function(){
        $('slidingText').getElements('li').each(function(el){
              new SlidingText(el);
        });
});

The Effect: (rollover text below)
  • javascript
  • mootools
  • text effects
  • sliding text
  • this is not flash
[inline] [/inline]

Download SlidingText.js


Tags: , , ,


Sep 29 2008

9

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!

Update:

View Demo

Tags: , ,


Sep 26 2008

10

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.

<?php
 
$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);
 
imagecopy($im,$src,0,0,$x,$y,$w,$h);
 
imagejpeg($im);
imagedestroy($im);
 
?>

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

Tags: , ,


« Previous Page