Heroize jQuery Plugin

The Heroize plugin generates a customizable animated hero/feature pane for use on your site. Features include

play/pause toggle
jump to pane buttons
keeps code clear and optimized for search engines
timer
Default panel display if Javascript is not enabled
slide transitions.

Source

https://github.com/joelasonian/heroize-jquery-plugin

Sample

Feature 1

Feature 2

Feature 3

How to implement

Setup your HTML in the following format:




Feature 1 text

Feature 2 text

Feature 3 text

Be sure to include the jQuery library and the Heroize plugin files.

Then simply run the function “heroize” on the #hero container.

jQuery(document).ready(function() {
  jQuery('#hero').heroize();
});

How to Customize

The hero pane is highly customizable.
You can override the default settings of the plugin by passing parameters

jQuery('#hero').heroize({
	'heroTransitionSpeed': 700,   //transition time in miliseconds
    'heroTimeDelay': 8000,		  //panel display length in miliseconds
    'heroPlayImg': 'play.png',	  //path to custom play button	
    'heroPauseImg': 'pause.png',  //path to custom pause button
    'heroNextChar': '>'        //Character to use in "Next" button
});

In addition the included CSS file has been clearly marked to easily configure the

height
width
fonts
opacities
colors
text bar properties

References

I built this plugin using Stefan Gabos’ jQuery Plugin Boilerplate – A great starting place for kick starting a jQuery plugin.

JoelPeterson