Blockster transition effect
- » Overview
- » Example 1
- » Usage & params
- » Example 2
- » Notes
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
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});
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
Example 2
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});
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() {...