moodblender 0.1 – I like to b(l)end things by Klaus M. Brantl

I’ve started this plugin for jQuery in december 2009 – and left it for at least two months.
Now I give you moodblender.
Don’t expect a amazing and cool and useful jQuery-plugin. It’s for fun only.

Let’s say you have an area in your website with some sort of “moody image”. Something that sits there pretty still and won’t change. Of course there are tons of jQuery-tools to make this a attractive spot (like cycle), but they are all a bit too much. And I found none that support slicing the image and using some sort of video-style transition. That’s where moodblender comes in.

The plugin is in it’s early stages. You should only use the settings splitparts, loop, maxloop and dwellTime. Using “blendOut: true” is fine, but does not work the way I had it in mind ;)

There are two demos available: number 1 and number 2.

Use the minified version (2.2kb) or read the full source. It’s tested with jQuery 1.3.2, but should work with the latest 1.4 as well.
Browserchecks aren’t complete yet. I’ve only tested it with Firefox 3.6, Safari 4, Google Chrome 4 and Opera 10.10. I did some tests with InternetExplorer 6 to 8, but only with an early version.

HTML

<div id="mood">
<img src="pix/mood_1_test.jpg" alt=""/>
<img src="pix/mood_3_test.jpg" alt=""/>
<img src="pix/mood_2_test.jpg" alt=""/>
</div>

CSS

#mood
{
 position:relative;
 overflow:hidden;
 width:500px;
 height:282px;
}

JS

$(document).ready(function() {
 $('#mood').moodblender({
 loop: true,
 maxloop: 10,
 blendOut: false,
 dwellTime: 3000
 });
});

I’ve a couple of things in mind for version 0.2 and beyond. Some of them are

• rewrite the loop-function and maybe make use of jQuery’s new delay()-function (sometimes looping kills itself or slices move in on one block… timing is evil in JS)
• add support for jQuery Easing Plugin
• fix the ‘blendOut: true’
• add full support for IE6 to 8 (or degrade nicely with IE6 ;)

Tags: javascript, Javascript/ HTML/ CSS, jquery, moodblender, plugin

This entry was posted on Sunday, March 14th, 2010 at 15:10 and is filed under Javascript/ HTML/ CSS, Projekte. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.