Buongorno a tutti!
Sto realizzando un sito con WP e su una pagina sto inserendo dei banner a mo' di divisori.
In Javascript ho realizzato uno di questi banner (non è altro che un rettangolo al cui interno volano delle particelle/connecting-dots).
Ho inserito il primo banner sulla pagina e tutto ok, il problema è sorto quando ho inserito il secondo banner (lo stesso file js ma in un altra parte della pagina).
Praticamente gli altri banner non si vedono. Come posso fare? Due file javascript vanno in contrasto? Cosa devo modificare?
CODICE:
<!DOCTYPE html>
<html>
<style>
/* h1 {font-size: 80px;
color: dimgrey;
font-family:'Continuum Light';
letter-spacing: none;
pointer-events: none;
font-weight: none;
position: absolute;
top: 40%;
bottom: 0;
left: 0;
right: 0;
text-align:center;
height: auto;
}
canvas {background-color: #fff} </style>
*/
<body>
<canvas id='particelle' width="3000px" height="150px">
</canvas>
<script>
var canvas = document.querySelector("canvas");
//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");
var TAU = 2 * Math.PI;
times = [];
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
update();
draw();
requestAnimationFrame(loop);
}
function Ball (startX, startY, startVelX, startVelY) {
this.x = startX || Math.random() * canvas.width;
this.y = startY || Math.random() * canvas.height;
this.vel = {
x: startVelX || Math.random() * 2 - 1,
y: startVelY || Math.random() * 2 - 1
};
this.update = function(canvas) {
if (this.x > canvas.width + 50 || this.x < -50) {
this.vel.x = -this.vel.x;
}
if (this.y > canvas.height + 50 || this.y < -50) {
this.vel.y = -this.vel.y;
}
this.x += this.vel.x;
this.y += this.vel.y;
};
this.draw = function(ctx, can) {
ctx.beginPath();
var distM = distMouse(this);
if (distM > 200) {
ctx.fillStyle = "#949494";
ctx.globalAlpha = .2;
} else {
ctx.fillStyle = '#bbbf3b';
ctx.globalAlpha = 1 - distM / 100; // ragio azione passaggio del mouse
}
ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
ctx.fill();
}
}
var balls = [];
for (var i = 0; i < canvas.width * canvas.height / (65*65); i++) { //numero raggi
balls.push(new Ball(Math.random() * canvas.width, Math.random() * canvas.height));
}
var lastTime = Date.now();
function update() {
var diff = Date.now() - lastTime;
for (var frame = 0; frame * 30.6667 < diff; frame++) { //velocità dots
for (var index = 0; index < balls.length; index++) {
balls[index].update(canvas);
}
}
lastTime = Date.now();
}
var mouseX = -1e9, mouseY = -1e9;
document.addEventListener('mousemove', function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
});
function distMouse(ball) {
return Math.hypot(ball.x - mouseX, ball.y - mouseY);
}
function draw() {
ctx.globalAlpha=1;
ctx.fillStyle = '#fff'; // colore di sfondo
ctx.fillRect(0,0,canvas.width, canvas.height);
for (var index = 0; index < balls.length; index++) {
var ball = balls[index];
ball.draw(ctx, canvas);
ctx.beginPath();
for (var index2 = balls.length - 1; index2 > index; index2 += -1) {
var ball2 = balls[index2];
var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
if (dist < 150) {
var distM= distMouse(ball2);
if (distM> 150) {
ctx.strokeStyle = "#DCDCDC"; // colore del reticolo
ctx.globalAlpha = .2; } else {ctx.globalAlpha = 0;}
ctx.lineWidth = "50px";
ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
}
}
ctx.stroke();
}
}
// Start
loop();
</script>
</body>
Grazie!!!!
Ciauuuu
Adele