Fx.Marquee

docs

This class is a pretty simple extension of the Fx.Morph class designed to let you animate little announcements into the page with ease. The basic principle is that you create an instance of the class and then just throw messages at it.

Below is our box for messages. The html in it looks like this:

<div id="marqueeTest"><b>I'm the box for Fx.Marquee</b></div>

Ok. Now we need to create an instance of Fx.Marquee.

fxmq = new Fx.Marquee($('marqueeTest'), {
	duration: 500,
	showEffect: {
		top: [0,0], //reset the top every time to zero
		left: [-100, 0],
		opacity: [0,1]
	},
	hideEffect: {
		top: 20
	},
	revertEffect: {
		top: [-30, 0],
		left: [0,0] //reset the left back to zero on revert
	}
});

Now we'll make some announcements:

fxmq.announce({
		message: 'Yo mama so fat...',
		delay: 1200, revert: false
}).chain(function(){
	fxmq.announce({
		message: 'When I yell "Kool-aid" she comes crashin\' through the wall!',
		delay: 2000, revert: false
	});
}).chain(function(){
	fxmq.announce({
		message: 'Oh Yeah? Well, you mamma so poor, I saw her walkin\' down the street the other day kicking an empty can and I asked, "What are you doin\'?" and she said...',
		delay: 3000, revert: false
	});
}).chain(function(){
	fxmq.announce({
		message: 'Movin\'',
		delay: 1500, revert: true,
		showEffect: {
			top: [0,0],
			left: [500, 0],
			opacity: [0,1]
		},
		hideEffect: {
			top: [0,0],
			left: [0, 500]
		}
	});
});

As illustrated in the last chained message above, you can pass in any of the initialization options when you call .announce(). This will set the options for the instance to these new settings, allowing you to send message after message along with various transitions for each one.