Blockster transition effect

Overview

Blockster is a Javascript transition effect designed for 'featured content' rotators or slideshows. Its underlying concept is to transition between one element to the next block by block. It is highly customisable in terms of how many blocks are involved, whether they fade in or simply appear, whether they appear in order or randomly, and more.

Example 1

Mitya likes jQuery

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah - read more

Mitya likes GD

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah - read more

Mitya likes Mootools

Blah blah blah blah blah blah blah blah blah blah - read more

Here we opt for 4 rows and 6 columns, with the blocks fading in randomly, not in order. Here's the code behind this example:

1new Blockster({

2     holder: '#featureRotator_1',

3     rows: 4,

4     cols: 6,

5     random: true

6});

^^ top of page

Usage & params

HTML & CSS

Simply ensure you have a holder <div> and, inside, a <div> for each slide. Enusure the holder and the slides have the same fixed dimensions - don't give your slides width/height 100%. The holder should be set to position 'relative' and the slides position 'absolute'. The HTML/CSS behind the examples on this page is included in the source .ZIP.

Javascript

Call blockster(params), where 'params' is an object of property/value pairings from the following:

holder (string, default: null) - a string to be used as a jQuery selector pointing to the holder element that contains the slides

rows (int, default: 10) - the number of rows for the block grid

cols (int, default: 10) - the number of columns for the block grid

pause (int, default: 3500) - the number of miliseconds to wait (i.e. show the slides) between transitions

animType (string, default: 'fade') - either 'simple' or 'fade'. If the former, blocks simply appear. If 'fade', they fade in.

random (bool, default: false) - if true, blocks will appear/fade-in in random order

blockAnimSpeed (int, default: 50) - the number of miliseconds between each block appearing/fading in

^^ top of page

Example 2

Mitya likes jQuery

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah - read more

Mitya likes GD

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah - read more

Mitya likes Mootools

Blah blah blah blah blah blah blah blah blah blah - read more

Here we've chosen 2 rows and 15 columns, with each block fading in in order. Here's the code behind this example:

1new Blockster({

2     holder: '#featureRotator_2',

3     rows: 2,

4     cols: 15

5});

^^ top of page

Notes

Dependent HTML/CSS

Blockster places a few basic requirements on the HTML and CSS applied to your rotator or slideshow. See above (usage and params) for more info. The HTML/CSS behind the examples on this page is included in the source .ZIP.

How?

That would be telling, but it has nothing to do with background positioning. So you can safely load your slides with child elements - links, paragraphs, images, whatever - and it will still work fine.

Loading jQuery

This script or plugin requires the jQuery library to be loaded on your site. It assumes you are loading jQuery via Google (click here for why you might do this). That is, the onload callback is

google.setonloadcallback(function() { ...

If you're loading jQuery manually yourself, change this in the JS files to

$(document).ready(function() {...

^^ top of page