API Documentation

Learn more about ParticleSlider

Particle()
Particle.color
Particle.gravityX
Particle.gravityY
Particle.move()
Particle.ttl
Particle.velocityX
Particle.velocityY
Particle.x
Particle.y
ParticleSlider()
ParticleSlider.$()
ParticleSlider.arrowPadding
ParticleSlider.color
ParticleSlider.drawParticles()
ParticleSlider.getCh()
ParticleSlider.getCw()
ParticleSlider.getPixelFromImageData()
ParticleSlider.height
ParticleSlider.hoverColor
ParticleSlider.init()
ParticleSlider.loadingStep()
ParticleSlider.monochrome
ParticleSlider.mouseForce
ParticleSlider.nextFrame()
ParticleSlider.nextSlide()
ParticleSlider.onNextSlide
ParticleSlider.parseColor()
ParticleSlider.ptlGap
ParticleSlider.ptlSize
ParticleSlider.resize()
ParticleSlider.showArrowControls
ParticleSlider.slideDelay
ParticleSlider.sliderId
ParticleSlider.swapList()
ParticleSlider.width

ParticleSlider Reference

Particle(ps) ⚓

Creates a Particle object.

ps: object; Reference to ParticleSlider

Returns: object Returns new Particle object

// Create a new Particle
var ps = new ParticleSlider();
var ptl = new ps.Particle(ps);

Particle.color ⚓

array

Color holds 4 bytes in an array. Possible Values: 0..255 Possible Values: 0..255 Possible Values: 0..255 Possible Values: 0..255

Default:

value parsed from @ParticleSlider.color if
@ParticleSlider.monochrome is `true`

value parsed from current slide if
@ParticleSlider.monochrome is `false`

// Set particle color to white.
ptl.color = [255,255,255,255];
// Set particle color to half transparent white.
ptl.color = [255,255,255,127];

Particle.gravityX ⚓

number

Home coordinate (x) from Particle. The Particle is forced to get this coordinates See Particle.gravityY

Default: 0

// Set particle home to left border.
ptl.gravityX = 0;
// Set particle home to right border.
ptl.gravityX = ps.width - 1;
// Set particle home to horizontal center.
ptl.gravityX = ps.width / 2;

Particle.gravityY ⚓

number

Home coordinate (y) from Particle. The Particle is forced to get this coordinates. See Particle.gravityX

Default: 0

// Set particle home to top border.
ptl.gravityY = 0;
// Set particle home to bottom border.
ptl.gravityY = ps.height - 1;
// Set particle home to vertical center.
ptl.gravityY = ps.height / 2;

Particle.move() ⚓

Particle moves under the action of the given forces. See Particle.x See Particle.y See Particle.gravityX See Particle.gravityY See Particle.velocityX See Particle.velocityY See ParticleSlider.mouseForce

// Example moves Particle under the action of the given forces.
ptl.move();

Particle.ttl ⚓

number

Time to live counts down every frame, and destroys Particle if ttl reaches 0. Disabled if value is null

Default: null

// Set time to live of Particle to 20 frames.
ptl.ttl = 20;
// Disable time to live
ptl.ttl = null;

Particle.velocityX ⚓

number

Current velocity in horizontal direction. See Particle.velocityY

Default: Random value between -5 and +5

// Set horizontal particle velocity targeting left border.
ptl.velocityX = -10;
// Accelerate particle targeting left border.
ptl.velocityX -= 10;
// Set horizontal particle velocity targeting right border.
ptl.velocityX = 10;
// Accelerate particle targeting right border.
ptl.velocityX += 10;
// Stop horizontal particle velocity.
ptl.velocityX = 0;

Particle.velocityY ⚓

number

Current velocity in vertical direction. See Particle.velocityX

Default: Random value between -5 and +5

// Set vertical particle velocity targeting top border.
ptl.velocityY = -10;
// Accelerate particle targeting top border.
ptl.velocityY -= 10;
// Set vertical particle velocity targeting bottom border.
ptl.velocityY = 10;
// Accelerate particle targeting bottom border.
ptl.velocityY += 10;
// Stop vertical particle velocity.
ptl.velocityY = 0;

Particle.x ⚓

number

Current coordinate (x) from Particle. See Particle.y

Default: Random value between 0 and ParticleSlider.width

// Set particle position to left border.
ptl.x = 0;
// Set particle position to right border.
ptl.x = ps.width - 1;
// Set particle position to horizontal center.
ptl.x = ps.width / 2;

Particle.y ⚓

number

Current coordinate (y) from Particle. See Particle.x

Default: Random value between 0 and ParticleSlider.height

// Set particle position to top border.
ptl.y = 0;
// Set particle position to bottom border.
ptl.y = ps.height - 1;
// Set particle position to vertical center.
ptl.y = ps.height / 2;

ParticleSlider([params]) ⚓

Creates a ParticleSlider object.

params: optional; object; final attributes of the ParticleSlider

sliderId string ID which contains source for slides and canvas elements. Default: particle-slider
color string Color (rgb,rgba,hex,shorthex) for controls and slide (if monochrome = true). Default: #fff
hoverColor string Color (rgb,rgba,hex,shorthex) for controls on hover. Default: #f88
width number width of slider. Default: 800
height number height of slider. Default: 400
ptlGap number gap between particles. Default: 0
ptlSize number particle-size (usually used in combination with pxlGap). Default: 1
slideDelay number time between slides. Default: 10
arrowPadding number padding between arrows and slider-border. Default: 10
showArrowControls boolean shows/hides arrows to change slide. Default: true
onNextSlide function function is called after slide changes. Default: null
monochrome boolean tints source images in given color. Default: false
mouseForce number force which pushes the particle from cursor away. Default: 10000

Returns: object ParticleSlider

// Each of the following examples creates a ParticleSlider
// 800px wide by 400px high.
// ParticleSlider is created with default-values
var ps = new ParticleSlider();
// ParticleSlider is created with given width and height
var ps = new ParticleSlider({
    width: 800,
    height: 400
});
// ParticleSlider is created with 1px gap between particles
var ps = new ParticleSlider({
    ptlGap: 1
});
// ParticleSlider is created 200px wide by 200px high,
// with a monochrome half transparent white slide
// without controls, bound on ID #logos
var ps = new ParticleSlider({
    sliderId: 'logos',
    width: 200,
    height: 200,
    color: 'rgba(255,255,255,0.5)',
    monochrome: true,
    showArrowControls: false
});

ParticleSlider.$(…) ⚓

query: string; pattern to search

(starts with . if matching class is searched.) (starts with # if matching id is searched.)

elems: optional; array; array of HtmlElements to filter.

searches in children of ParticleSlider.sliderId if empty

asArray: boolean; forces array as result. Default: false

Returns: array returns array if multiple matches, or asArray is true

Returns: object returns HtmlElement if single element matches and asArray is false

Returns: string returns id or class of searched element

if no element matches and asArray is false Searches jQuery like in HtmlElements.

// Example returns current drawing Canvas
ps.$('.draw');
// short hex
ps.parseColor('#fff');
// rgb
ps.parseColor('rgba(255,255,255)');
// rgba
ps.parseColor('rgba(255,255,255,1)');

ParticleSlider.arrowPadding ⚓

number

Inner distance between canvas border and controls in px. The slider checks this value on every change of slide or change of size.

Default: 10

// Create a ParticleSlider with
// 25px padding.
var ps = new ParticleSlider({
    arrowPadding: 25
});
// Create a ParticleSlider without padding.
var ps = new ParticleSlider({
    arrowPadding: 0
});
// Create a ParticleSlider with default
// padding and change padding to 25px
var ps = new ParticleSlider();
ps.arrowPadding = 25;

ParticleSlider.color ⚓

string

Color (rgb,rgba,hex,shorthex) for controls and slide (if monochrome = true). Can only be specified on slider creation.

Default: #fff

// Each of the following examples creates a
// ParticleSlider with white color.
// short hex
var ps = new ParticleSlider({
    color: '#fff'
});
// hex
var ps = new ParticleSlider({
    color: '#ffffff'
});
// rgb
var ps = new ParticleSlider({
    color: 'rgb(255,255,255)'
});
// rgba
var ps = new ParticleSlider({
    color: 'rgba(255,255,255,1)'
});

ParticleSlider.drawParticles() ⚓

Draws all Particle to canvas

// Draw all particles
ps.drawParticles();

ParticleSlider.getCh() ⚓

Returns: number Desired height of drawing canvas

Get current desired height of canvas. Override function to special responsive layouts. Default function fits canvas to minimum of ParticleSlider.height and document height. Returned value is checked every keyframe.

// Get desired height
ps.getCh();
// Override default behavior with mehtod that
// sets desired height to size of specific html element
ps.getCw = function(){return specificElement.clientWidth};

ParticleSlider.getCw() ⚓

Returns: number Desired width of drawing canvas

Get current desired width of canvas. Override function to special responsive layouts. Default function fits canvas to minimum of ParticleSlider.width and document width. Returned value is checked every keyframe.

// Get desired width
ps.getCw();
// Override default behavior with mehtod that
// sets desired width to size of specific html element
ps.getCw = function(){return specificElement.clientWidth};

ParticleSlider.getPixelFromImageData(…) ⚓

imageData: object; image data from canvas. Array of colors

and alpha with width and height attributes

offsetX: number; offset would be added to x value of image.
offsetY: number; offset would be added to y value of image.

Returns: array Array of objects with following form:

{
1. x number vertical position
2. y number horizontal position
3. color array color array with [red, green, blue, alpha]
}

Method extracts all non transparent pixels to result array. Offset x,y would be added to original coodinates.

// Extracts non transparent pixel from image data without offset
ps.getPixelFromImageData(imageData, 0, 0);
// Extracts non transparent pixel from image data with 50px vertical offset
ps.getPixelFromImageData(imageData, 50, 0);
// Extracts non transparent pixel from image data with 50px horizontal offset
ps.getPixelFromImageData(imageData, 0, 50);

ParticleSlider.height ⚓

number

Height in px of slider. Can set while running. The slider checks this value every keyframe.

Default: 400

// Create a 100px high ParticleSlider.
var ps = new ParticleSlider({
    height: 100
});
// Create a ParticleSlider with default height
// and change height to 100px.
var ps = new ParticleSlider();
ps.height = 100;

ParticleSlider.hoverColor ⚓

string

Color (rgb,rgba,hex,shorthex) for controls on hover. Can only be specified on slider creation.

Default: #88f

// Each of the following examples creates a
// ParticleSlider with white hover color.
// short hex
var ps = new ParticleSlider({
    hoverColor: '#fff'
});
// hex
var ps = new ParticleSlider({
    hoverColor: '#ffffff'
});
// rgb
var ps = new ParticleSlider({
    hoverColor: 'rgb(255,255,255)'
});
// rgba
var ps = new ParticleSlider({
    hoverColor: 'rgba(255,255,255,1)'
});

ParticleSlider.init() ⚓

Initializes ParticleSlider and extracts Particle from current slide.

// Initializes ParticleSlider
ps.init();

ParticleSlider.loadingStep() ⚓

Every loaded element calls this function. If all necessary ressources are loaded, the slider starts his timers and begins to generate and render Particles

// Function should called after necessary ressource is loaded.
ps.loadingStep();

ParticleSlider.monochrome ⚓

function

Tints source images in ParticleSlider.color if value is true. The slider checks this value on every change of slide or change of size.

Default: false

// Creates a monochrome ParticleSlider.
var ps = new ParticleSlider({
    monochrome: true
});
// Creates a colored ParticleSlider.
var ps = new ParticleSlider({
    monochrome: false
});
// Create a colored ParticleSlider and
// switch to monochrome after creation.
var ps = new ParticleSlider();
ps.monochrome = true;

ParticleSlider.mouseForce ⚓

number

Force which pushes the particle from cursor away. Set value to 0 to turn off particle manipulation.

Default: 10000

// Creates a ParticleSLider with low manipulation force.
var ps = new ParticleSlider({
    mouseForce: 500
});
// Creates a ParticleSLider with high manipulation force.
var ps = new ParticleSlider({
    mouseForce: 15000
});
// Creates a ParticleSLider without manipulation force.
var ps = new ParticleSlider({
    mouseForce: 0
});
// Create a colored ParticleSlider and
// lower manipulation force.
var ps = new ParticleSlider();
ps.mouseForce -= 1000;

ParticleSlider.nextFrame() ⚓

Moves all Particles and render particles afterwards.

// Render next frame
ps.nextFrame();

ParticleSlider.nextSlide([count]) ⚓

count: optional; number; slide-index would moved count slides. Default: 1

Method switches slides or refreshes slide if count is 0

// Show next slide
ps.nextSlide();
// or
ps.nextSlide(1);
// Show previous slide
ps.nextSlide(-1);
// Refresh slide
ps.nextSlide(0);

ParticleSlider.onNextSlide ⚓

function

This function is called after the slide changes.

Default: null

// Creates a ParticleSlider which shows an
// alert after slide change.
var ps = new ParticleSlider({
    onNextSlide: function(){alert('next slide');}
});
// Create a ParticleSlider and attach
// function onNextSlide after creation.
var ps = new ParticleSlider();
ps.onNextSlide = function(){alert('next slide');};

ParticleSlider.parseColor() ⚓

color string Hexadecimal color. Example: #ffffff

color string short Hexadecimal color. Example: #fff

color string rgb color. Example: rgb(255,255,255)

color string rgba color. Example: rgba(255,255,255,1)

Returns: array returns for fields long color [red,green,blue,alpha]

Parse color to array [red,green,blue,alpha]. red: 0..255 green: 0..255 blue: 0..255 alpha: 0..255

See ParticleSlider.color See ParticleSlider.hoverColor

// All function calls return [255,255,255,255]
// hex
ps.parseColor('#ffffff');
// short hex
ps.parseColor('#fff');
// rgb
ps.parseColor('rgba(255,255,255)');
// rgba
ps.parseColor('rgba(255,255,255,1)');

ParticleSlider.ptlGap ⚓

number

Gap in px between Particles. Can set while running. The slider checks this value on every change of slide or change of size.

Default: 0

// Create a ParticleSlider with
// 1px gap between Particles.
var ps = new ParticleSlider({
    ptlGap: 1
});
// Create a ParticleSlider with default gap
// and change gap to 1px
var ps = new ParticleSlider();
ps.ptlGap = 1;

ParticleSlider.ptlSize ⚓

number

Size in px of Particles. Can set while running.

Default: 1

// Create a ParticleSlider with
// 2px x 2px big Particles.
var ps = new ParticleSlider({
    ptlSize: 2
});
// Create Particles with default size
// and change size to 2px
var ps = new ParticleSlider();
ps.ptlSize = 2;

ParticleSlider.resize() ⚓

Resizes canvas to values got from ParticleSlider.getCw and ParticleSlider.getCh

// Resize ParticleSlider
ps.resize();

ParticleSlider.showArrowControls ⚓

boolean

Show / Hide controls. Slider sets value to false, if only one slide is given. The slider checks this value on every change of slide or change of size.

Default: true

// Create a ParticleSlider with controls.
var ps = new ParticleSlider({
    showArrowControls: true
});
// Create a ParticleSlider without controls.
var ps = new ParticleSlider({
    showArrowControls: false
});
// Create a ParticleSlider with controls
// and hide them after creation.
var ps = new ParticleSlider();
ps.showArrowControls = false;

ParticleSlider.slideDelay ⚓

number

Delay in seconds of autmoatic slide change. Set to 0 if no automatic change is wanted. The slider checks this value on every change of slide. Call ParticleSlider.nextSlide() with count 0 to start the timer.

Default: 10

// Create a ParticleSlider with
// 30s delay between slides.
var ps = new ParticleSlider({
    slideDelay: 30
});
// Create a ParticleSlider without
// automatically slide change.
var ps = new ParticleSlider({
    slideDelay: 0
});
// Set slide delay to 30s and trigger timer.
ps.slideDelay = 30;
ps.nextSlide(0);

ParticleSlider.sliderId ⚓

string

ID which contains source for slides and canvas elements. Can only be specified on slider creation.

Default: particle-slider

// Create new ParticleSlider on HtmlElement with ID `logos`
var ps = new ParticleSlider({
    sliderId: 'logos'
});

ParticleSlider.swapList([p], srcList, dstList) ⚓

p: optional; object; Particle which should be swaped between two lists
srcList: object; Root-element of a double linked list. Attribute first needed
dstList: object; Target-element of a double linked list. Attribute first needed

Method removes Particle p from srcList. If no Particle is given, a new would created. Afterwards p was added to the beginning of dstList.

// Example removes p from buffer and moves p to trash.
ps.swapList(p, buffer, trash);
// Example adds new Particle to buffer or recycles Particle from trash.
ps.swapList(trash.first, trash, buffer);

ParticleSlider.width ⚓

number

Width in px of slider. Can set while running. The slider checks this value every keyframe.

Default: 800

// Create a 100px wide ParticleSlider.
var ps = new ParticleSlider({
    width: 100
});
// Create a ParticleSlider with default width
// and change width to 100px.
var ps = new ParticleSlider();
ps.width = 100;