I have four-color squares and would like to play them in the background randomly and give that parallax effect when you move the mouse. Does anyone know of any plugins for this?
Style this, but placing the squares instead of the dots. link
Thank you.
Looking at the code from the library you linked (just click on the "download" button), we found this:
/**
* Draw particle
*/
Particle.prototype.draw = function() {
// Draw circle
ctx.beginPath();
ctx.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, options.particleRadius / 2, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
I'll modify it to draw a square:
/**
* Draw particle
*/
Particle.prototype.draw = function() {
// Draw square
var ix = this.position.x + this.parallaxOffsetX;
var iy = this.position.y + this.parallaxOffsetY;
ctx.fillRect(ix - options.particleRadius / 2, iy - options.particleRadius / 2, options.particleRadius, options.particleRadius);
I tested the above modification with the demo code that is together with the library (which is the site code) and worked perfectly. :)
I just have to warn you that options.particleRadius has a misleading name. I do not know why, this is not really the particle radius, but the diameter.
To change the color, simply add something like this before fillRect :
var oldStyle = ctx.fillStyle;
ctx.fillStyle = '#FF0000'; // Use a cor que preferir aqui.
And then:
ctx.fillStyle = oldStyle;