Привет, ребята, я не кодер, но я пытаюсь использовать disintegrate.js, и у меня есть работа над одной из кнопок на моем сайте, но я хотел бы, чтобы этот эффект работал на многих разных классах / кнопках.
var btn = document.querySelector(".boxer");
var ctx;
var colorInfoElem = document.querySelector("#colorInfo");
html2canvas(btn).then(canvas => {
ctx = canvas.getContext("2d");
createParticleCanvas();
let reductionFactor = 17;
btn.addEventListener("click", e => {
// Get the color data for our button
let width = btn.offsetWidth;
let height = btn.offsetHeight
let colorData = ctx.getImageData(0, 0, width, height).data;
// Keep track of how many times we've iterated (in order to reduce
// the total number of particles create)
let count = 0;
// Go through every location of our button and create a particle
for (let localX = 0; localX < width; localX++) {
for (let localY = 0; localY < height; localY++) {
if (count % reductionFactor === 0) {
let index = (localY * width + localX) * 4;
let rgbaColorArr = colorData.slice(index, index + 4);
let bcr = btn.getBoundingClientRect();
let globalX = bcr.left + localX;
let globalY = bcr.top + localY;
createParticleAtPoint(globalX, globalY, rgbaColorArr);
}
count++;
}
}
});
});
/* An "exploding" particle effect that uses circles */
var ExplodingParticle = function() {
// Set how long we want our particle to animate for
this.animationDuration = 1000; // in ms
// Set the speed for our particle
this.speed = {
x: -5 + Math.random() * 10,
y: -5 + Math.random() * 10
};
// Size our particle
this.radius = 5 + Math.random() * 5;
// Set a max time to live for our particle
this.life = 30 + Math.random() * 10;
this.remainingLife = this.life;
// This function will be called by our animation logic later on
this.draw = ctx => {
let p = this;
if (this.remainingLife > 0 && this.radius > 0) {
// Draw a circle at the current location
ctx.beginPath();
ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);
ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ", 1)";
ctx.fill();
// Update the particle's location and life
p.remainingLife--;
p.radius -= 0.25;
p.startX += p.speed.x;
p.startY += p.speed.y;
}
}
}
var particles = [];
function createParticleAtPoint(x, y, colorData) {
let particle = new ExplodingParticle();
particle.rgbArray = colorData;
particle.startX = x;
particle.startY = y;
particle.startTime = Date.now();
particles.push(particle);
}
var particleCanvas, particleCtx;
function createParticleCanvas() {
// Create our canvas
particleCanvas = document.createElement("canvas");
particleCtx = particleCanvas.getContext("2d");
// Size our canvas
particleCanvas.width = window.innerWidth;
particleCanvas.height = window.innerHeight;
// Position out canvas
particleCanvas.style.position = "absolute";
particleCanvas.style.top = "0";
particleCanvas.style.left = "0";
// Make sure it's on top of other elements
particleCanvas.style.zIndex = "1001";
// Make sure other elements under it are clickable
particleCanvas.style.pointerEvents = "none";
// Add our canvas to the page
document.body.appendChild(particleCanvas);
}
function update() {
// Clear out the old particles
if (typeof particleCtx !== "undefined") {
particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
}
// Draw all of our particles in their new location
for (let i = 0; i < particles.length; i++) {
particles[i].draw(particleCtx);
// Simple way to clean up if the last particle is done animating
if (i === particles.length - 1) {
let percent = (Date.now() - particles[i].startTime) / particles[i].animationDuration;
if (percent > 1) {
particles = [];
}
}
}
// Animate performantly
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);<div class="container">
<div class="boxer"><a href="#" class="attractionslink">Attractions</a></div>
</div>
<div class="container">
<div class="boxer2"><a href="#" class="attractionslink">Safety</a></div>
</div>Прямо сейчас, когда я нажимаю боксер 1, он работает, но когда я нажимаю боксер 2, это не так. Я попытался добавить boxer2в первую строку, var btnтак что это выглядит, var btn = document.querySelector (".boxer",".boxer2");но это не сработало.
Вы ищете querySelectorAll.
Код будет выглядеть следующим образом:
var btn = document.querySelectorAll(".boxer, .boxer2")Теперь, везде, где вы использовали btnодин элемент, вам нужно изменить код, чтобы принять значение из массива btn (да, теперь это массив).
Например, теперь, вместо того, чтобы btn.addEventListenerвы должны были (возможно forEach) зацикливаться на всех таких кнопках:
btn.forEach(function(button) {
button.addEventListener // rest of the code
});var btns = document.querySelectorAll(".boxer, .boxer2");Это тот же синтаксис, что и селектор CSS в файле .css при выборе элементов для стилизации. Вы выбираете две разные вещи, разделяя их запятой.
querySelectorAll возвращает NodeList, вам нужно преобразовать его в массив и выполнить итерацию по этому массиву, чтобы добавить прослушиватели событий к каждому узлу списка dom
var btns = document.querySelectorAll('.boxer,.boxer2');
[].forEach.call(btns, function(btn) {
console.log(btn);
btn.addEventListener('click', function(event) {
alert(this.innerText + " Clicked!");
})
})<div class="container">
<div class="boxer"><a href="#" class="attractionslink">Attractions</a></div>
</div>
<div class="container">
<div class="boxer2"><a href="#" class="attractionslink">Safety</a></div>
</div>