AJAX24

Componentes y Efectos AJAX

Suscríbete vía Email

e24BubbleFx - Photo bubble transition effect

Introduction
e24BubbleFx is a plugin for Mootools that makes a transition between two photos. The transition comes in form of a bubble that move around the back picture discovering it.
But better we see it in action with the following demos.

Demos
Demo1: Basic
Demo2: Advanced

Usage
Include Mootools 1.2.2 Core inside the HTML header. Remember that you can generate an optimum version of the mootools library selecting only the required components at Mootools Core Builder. The required components are DOMReady, Fx.Transitions, Fx.Tween and all its dependencies. Also include e24BubbleFx library:

1
2

<script src="js/mootools-1.2.2-core-nc.js" type="text/javascript"></script>
<script src="js/e24bubblefx-1.0rc.js" type="text/javascript"></script>

Now write the necessary HTML code to define the effect container. We will need a container layer (“visor” in this case). This layer will have the image background that will appear while the animation executes. You must take into account that this background image will appear directly in case that javascript is disabled, so that this effect will degrade gracefully.

Then we have to add a very basic CSS rules for the container layer. We just have to define the dimensions and the background image.

1
2
3
4
5
6

#visor {
	position:relative;
	width:1000px;
	height:250px;
	background: url(img/back1.jpg) no-repeat;
}

Next we have to write the necessary javascript code. We need to pass an options object. The main option is the “container” that has to point to the container layer id, “visor” in this case. We will see the rest of the options in detail below.
Finally we have to call the start method with an array of coordinates that will describe the bubble steps.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

	var bubbleFx = new e24BubbleFx({
		container: 'visor',
		width: 1000,
		height: 250,
		initStep: {x:0, w:100},
		img: 'img/back2.jpg',
		transition: 'quad:out',
		infinite: false
	});
 
	discoverFx.start([
		{x:200, w:520, d1:800, d2:1100},
		{x:350, w:270, d1:800, d2:800},
		{x:0, w:230, d1:800, d2:1100},
		{x:250, w:530, d1:800, d2:1100},
		{x:300, w:700, d1:800, d2:1100}
	]);

Options

• container: The container layer id
• backImg: The background image, the same that you have to define with a css rule for the container layer
• frontImg: The front image
• width: The visor’s width
• height: The visor’s height
• transition: The effect transition name, like: ‘quad-out’, ‘bounce-in’, ‘elastic-in’, etc.
• stepDuration: The duration in milliseconds of each step. Note that you can overwrite that value at step level with the start method
• infinity: (true/false) If is true the animation will repeat infinitely.
• infiniteDelay: The delay in milliseconds to restart the animation in case that the infinity option be active
• initStep: {x:0, w:0} The initial setting for the effect, where x is the bubble position and w is the bubble width

Events

• onStep: function(index). This event fires at each animation step and gets the step index a the unique param. The first index is zero
• onComplete: function(). This event fires at the end of the animation. In case of infinity be set to true the event will fires at each cycle

Methods

• start: Begin the animation. Recives an array of coordinates a param. You should to take into account that this effect is about a bubble moving that lets discover the back image, then these coordinates define the position and width for the bubble at each step. Also you can define the steps duration for each bubble’s wall.
  • x: the bubble distance from the left side of the container layer
  • w: the bubble’s width
  • d1: the duration in milliseconds of the bubble’s left wall
  • d2: the duration in milliseconds of the bubble’s right wall
  ^?View Code JAVASCRIPT

  1 2 3 4 5 6 7

  discoverFx.start([ {x:200, w:520, d1:800, d2:1100}, {x:350, w:270, d1:800, d2:800}, {x:0, w:230, d1:800, d2:1100}, {x:250, w:530, d1:800, d2:1100}, {x:300, w:700, d1:800, d2:1100} ]);

• safeStart: Similar to start but begins the effect after all the required images are preloaded. NOTE: This method require to include mootools-1.2.2.1-more.js with the component Asset
• cancel: Cancels the effect

Known Issues

• Ability to make the transition between more than two images
• To make the effect vertical

License
Distributed under MIT License

Download
e24BubbleFx 1.0RC (218 KB, includes the demos)

Remember that the heart of this effect is the bubble’s step coordinates, so a creative combination of steps can result in a cool effect. I invite you to share your steps combination.

If you want to check what I am working on now, then follow me at twitter @aartiles24

Copyright 2009. AJAX24. Powered by equipo24

• Inicio
• Ajaxigg
• About
• Contact