First and foremost, I want to share a link with you to a page that I am currently developing so you can better understand the situation:
Additionally, here is a link to the background effect: https://github.com/jnicol/particleground
If you visit the page, you will notice that the middle section cannot be scrolled. Furthermore, the website link is not clickable and you are unable to select any text.
I am using Wordpress with the Divi theme for constructing the website. The code responsible for creating the background is included in a Code Module and appears as follows:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
If the Code Module is removed, the entire section works correctly once again. I have been examining the source code of the plugin, but my lack of experience with JavaScript prevents me from identifying the issue causing this behavior.