Hi!
I put to my functions.php a javascript effect (animated noise)
My problem is adding to the Bricks editor too. No only to the canvas, It is playing in side panels too, what are the editor element.
Can you see the noise in the lighter gray sections?
Hey @simplecreative,
thanks for your report.
I am not exactly sure what is meant by “animated noise”. And I am also not sure what I should see on that screenshot to be honest. 
Can you please show the code you used so that I can maybe understand and – ideally – help in this matter?
Best,
André
Hi!
Thanks your answer. I have put it into functions.php file. The problem is running my JS effects in Bricks Editor too, not only in front-end.
/**
* Background noise JS effect
*/
function noise_bkgd_javascript() {
?>
<canvas id="noise" class="noise"></canvas>
<style>
.noise {
z-index: 8;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .1;
}
</style>
<script>
const noise = () => {
let canvas, ctx;
let wWidth, wHeight;
let noiseData = [];
let frame = 0;
let loopTimeout;
// Create Noise
const createNoise = () => {
const idata = ctx.createImageData(wWidth, wHeight);
const buffer32 = new Uint32Array(idata.data.buffer);
const len = buffer32.length;
for (let i = 0; i < len; i++) {
if (Math.random() < 0.5) {
buffer32[i] = 0xff000000;
}
}
noiseData.push(idata);
};
// Play Noise
const paintNoise = () => {
if (frame === 9) {
frame = 0;
} else {
frame++;
}
ctx.putImageData(noiseData[frame], 0, 0);
};
// Loop
const loop = () => {
paintNoise(frame);
loopTimeout = window.setTimeout(() => {
window.requestAnimationFrame(loop);
}, (1000 / 25));
};
// Setup
const setup = () => {
wWidth = window.innerWidth;
wHeight = window.innerHeight;
canvas.width = wWidth;
canvas.height = wHeight;
for (let i = 0; i < 10; i++) {
createNoise();
}
loop();
};
// Reset
let resizeThrottle;
const reset = () => {
window.addEventListener('resize', () => {
window.clearTimeout(resizeThrottle);
resizeThrottle = window.setTimeout(() => {
window.clearTimeout(loopTimeout);
setup();
}, 200);
}, false);
};
// Init
const init = (() => {
canvas = document.getElementById('noise');
ctx = canvas.getContext('2d');
setup();
})();
};
noise();
</script>
<?php
}
add_action('wp_footer', 'noise_bkgd_javascript');
Hey @simplecreative,
well… this is definitely not a bug.
You could wrap the add_action in a call if you’re currently on the frontend:
...
...
if ( bricks_is_frontend() ) {
add_action('wp_footer', 'noise_bkgd_javascript');
}
Let me know if that helps.
Best,
André
)