Bit Explosion

Bit Explosions

Whilst the particles are still, move the mouse over them to see them repulse.

By default this component will commence when it is scrolled in to view. You can override this by specifying the data-rwx-manual-control on the rwx-bit-explosion element. You can then manually control it by specifiying rwxBitExplosions.commence('ID') where 'ID' is the ID of the element to commence.

Description

Display web content in a fun, interactive and animateable way with the Roseworx Bit Explosion component. Give some dazzle to your headings and main points of interest.

Usage
  • import rwxBitExplosions from 'roseworx/js/bitfx/rwxBitExplosions';
  • Copy the html code and personalise it to your use case.
Roseworx BitFont

This component uses Roseworx BitFont - a dynamic and animateable font that uses particles to make up different characters.

Be wary of using too many bitfx components on one page due to the processing power needed to render the graphics.

Current supported bitfx characters include; 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '!', '?', ','

Currently supported orientations are 'horizontal', 'vertical', 'slanted', 'wrap'. When using the 'wrap' orientation you can use the special character '*' which will identify as a carriage return and place anything after on a new line.

Currently supported shapes are 'circle', 'square'.

Configure BitFont
data-rwx-bit-explosion-value='{CHARACTER}' Sets the letter/word/sentence made up of the supported characters above.
data-rwx-bit-explosion-orientation='{ORIENTATION}' Sets the orientation of the specified value, must be one of the supported orientations above. If 'wrap' is specified, '*' denotes a carriage return.
data-rwx-bit-explosion-shape='{SHAPE}' Sets the shape of the letter particles, must be one of the supported shapes above.
data-rwx-bit-explosion-color='{COLOR}' Sets the color of the letter particles. Default is #FFFFFF
data-rwx-bit-explosion-background-color='{ORIENTATION}' Sets the background color. Default is #000000
Configuration Options

Optionally add any of these data attributes to the rwx-bit-explosion element to configure it a certain way.

data-rwx-bit-explosion-secondary-color='{COLOR}' Sets the color of the particles surrounding the word.