1
I have little squares of four colors and would like to throw them in the background in a random way and give that effect to Parallax when you move your mouse. Does anyone know any plugin for this?
Style this, but putting the squares in place of the dots. http://jnicol.github.io/particleground/
Thank you.
1
Looking at the library code you linked (just click on the "download" button), we find 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 will modify 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 bundled with the library (which is the site code) and worked perfectly. :)
I just have to warn you options.particleRadius has a misleading name. I don’t know for what reason, it’s actually not the radius of the particle, but the diameter.
To change the color, just add something like this before the fillRect:
var oldStyle = ctx.fillStyle;
ctx.fillStyle = '#FF0000'; // Use a cor que preferir aqui.
And that after:
ctx.fillStyle = oldStyle;
I also think the question is not broad, good answer +1
Browser other questions tagged javascript jquery
You are not signed in. Login or sign up in order to post.
Your question has 4 votes to close as wide as too. I almost gave the fifth vote that would close it, but thinking calmly and reading the text of the question carefully, I thought it best to give a real answer. In my opinion, this question is only written in a way that seems to be too broad but is not.
– Victor Stafusa