Home & blog  /  Tag: effect  /

Bouncy text plugin

posted: 03 Feb '11 16:42 tags: text, effect, animation, bounce, jQuery

Some months ago I posted my Spraycan plugin. Just when you thought I couldn't post anything more pointless, I give you my bouncy text plugin.

This, erm, does what it says on the tin. You point it at some text on your page via jQuery selector, and it randomly makes the letters in that element bounce up and down.

Head over here to download, get usage info or view a demo.

It works in all IEs, Firefoxes and Operas, but currently not Chrome or Safari. How about that? Something works in IE6 but not Chrome. Rather amusing.

I will try to get out more.

post a comment

Blockster - fixed for jQuery v1.4.3

posted: 28 Oct '10 14:00 tags: block, transition, effect, rotation, slideshow, Javascript, jQuery

Thanks for the reports that Blockster wasn't working with the latest release of jQuery, 1.4.3. This is now fixed, and you can re-download the source here.

I would hesitate to say this was a jQuery bug, but it certainly seemed like one. For some reason, values set via the .css() method were being set, but read back as 0, e.g.

1$('#something').css({left: 15+'px', top: 20+'px'});

2alert($('#something').css('left')); //alerts 0px, not 15px

In jQuery 1.4.2, there was no issue. Anyway, some fudge later involving tracker variables, this is fixed. Phew.

2 comments | post new

Blockster update: controlling it with navigation

posted: 11 Sep '10 18:27 tags: block, transition, effect, rotation, slideshow, Javascript, jQuery

Of all my scripts, Blockster has probably got the best response. I've had a lot of e-mails about that one, and one from Andreas Rasmussen recently asked if it could be controlled by navigation rather than just auto-rotate.

This is something I've been meaning to build into it for some time, and now I have. This has meant a slight change in how you call it into your page. The new syntax is:

1blocksterInstance = new Blockster({

2     holder: '#featureRotator_1',

3     rows: 4,

4     cols: 6,

5     random: true

6});

Then, to force it to go to a particular slide and interrupt the auto-rotate, you'd call:

1blocksterInstance.jump(0); //go to slide 1

2blocksterInstance.jump(3); //go to slide 4, etc

Head over here to download, get usage info or view a demo.

You might recognise from the above that Blockster has gone all trendy and become object-orientated, hence it's instantiated with new and assigned to a variable.

So it started life as a rotator, now it can be used as a carousel (though don't forget I just built a proper carousel!).

Enjoy.

11 comments | post new

Blockster transition effect

posted: 01 Jul '10 12:56 tags: block, transition, effect, rotation, slideshow, Javascript, jQuery

Just posted this in the scripts section. Blockster is a cool transition effect designed for 'featured content' rotators or slideshows, transitioning between slides block by block.

Head over here to download, get usage info or view a demo.

The script gives you full control over how the script behaves, giving you scope to create some pretty varying effects.

You can set the number of rows and cols in the block grid, whether the blocks should fade in or simple appear, whether they should appear randomly or in order, and more.

post a comment