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.

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