Удалить анимацию частиц в JavaScript
Итак, у меня есть шаблон, который я использую в WordPress и вношу небольшие изменения, чтобы сделать его таким, каким я хочу. хотя теперь в заголовке есть анимация, выполненная с помощью JavaScript, и я хотел «устранить» я опубликую код для упомянутого события:
// Breadcrumb effect
//if ($(".dt_pagetitle .canvas").length) {
let cnvs = document.getElementById("canvas"),
c2d = cnvs.getContext("2d");
cnvs.width = window.innerWidth, cnvs.height = window.innerHeight;
let particlesArray = [];
window.addEventListener("resize", function() {
cnvs.width = window.innerWidth, cnvs.height = window.innerHeight
});
let cursor = {
x: null,
y: null
};
cnvs.addEventListener("click", function(e) {
cursor.x = e.pageX, cursor.y = e.pageY;
for (let t = 0; t < 10; t++) particlesArray.push(new particles)
}), cnvs.addEventListener("mousemove", function(e) {
cursor.x = e.pageX, cursor.y = e.pageY;
for (let t = 0; t < 10; t++) particlesArray.push(new particles)
});
class particles {
constructor() {this.x = cursor.x, this.y = cursor.y, this.size = 10 * Math.random() + 1, this.speedX = 3 * Math.random() - 1.5, this.speedY = 3 * Math.random() - 1.5, this.color = "blue"}
update() {this.x += this.speedX, this.y += this.speedY, this.size > .2 && (this.size -= .1)}
draw() {c2d.strokeStyle = this.color, c2d.lineWidth = .4, c2d.beginPath(), c2d.arc(this.x, this.y, this.size, 0, 2 * Math.PI), c2d.stroke()}
}
let hndlParticles = () => {
for (let e = 0; e < particlesArray.length; e++) particlesArray[e].update(), particlesArray[e].draw(), particlesArray[e].size <= .3 && (particlesArray.splice(e, 1), e--)
}
let anim = () => {
c2d.clearRect(0, 0, cnvs.width, cnvs.height), hndlParticles(), requestAnimationFrame(anim)
}
anim();
//}<canvas id=canvas></canvas>мне удалось удалить его с помощью разработки браузера, отключив оба события (мышь и перемещение мыши), хотя хотелось сделать это навсегда
вещи, которые я пробовал:
- удалите код из упомянутого файла, хотя мне не нужен такой подход, потому что, если шаблоны получат какое-то обновление, мне в конечном итоге придется снова удалить код вручную
хотя важно отметить, что даже несмотря на то, что я удалил этот код из файла, анимация все еще работала и проверяла файл в браузере, я все равно мог видеть код (странно, я знаю), который изначально думал, что это проблема с кешем, поэтому очистил его и все равно закончилось с тем же результатом
- попробовал использовать RemoveEventListener, хотя из-за отсутствия у меня знаний о JavaScript тоже не получилось
с учетом вышесказанного я пытаюсь найти помощь по этому вопросу, где я мог бы реализовать некоторый js-код и импортировать его в дочернюю тему Functions.php.
я хочу удалить анимацию частиц со своего сайта
а нельзя просто удалить код?
попробуйте пообщаться в javascript-чате stackoverflow chat.stackoverflow.com/rooms/17/javascript
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
попробуйте добавить это в файл function.php вашей дочерней темы.
<?php
function add_custom_js() {
?>
<script>
// JavaScript code here
var canvas = document.getElementById('canvas');
canvas.addEventListener = override;
function override(type, callback, mode) {
return false;
}
</script>
<?php
}
add_action('wp_head', 'add_custom_js', 0);
то, что он пытается сделать, это запустить до того, как будут добавлены другие прослушиватели событий, а затем переопределить метод addeventlistener для этого элемента холста, чтобы ничего не делать.
это зависит от того, когда именно добавляются другие прослушиватели событий.
вам нужно, чтобы этот элемент холста был проанализирован браузером, а затем запустил код переопределения до того, как будут добавлены его собственные прослушиватели событий.
поэтому вместо использования wp_head вам нужно будет добавить что-то вроде wp_body или wp_footer
можешь пометить это как принятый для меня ответ
можешь ли ты уточнить, что ты на самом деле хочешь сделать?