I've been experimenting with creating a unique "bubble" effect on one of my websites, but I'm facing difficulty changing the styling in a foreach loop.
Despite no errors showing up in the console, I'm at a loss as to how to effectively debug this issue.
Below is the code snippet:
<script lang="ts">
let bubbles:HTMLDivElement[]=[];
let loaded:number=0;
const ballAmount:number=15;
function moveBubbles():void {
bubbles.forEach((element)=>{
element.style.top=Math.round((Math.random())*100)+"vh;";
element.style.left=Math.round((Math.random())*100)+"vw;";
});
setTimeout(moveBubbles,15000);
}
moveBubbles();
</script>
<div class="bubbles">
<div class="circles">
{#each {length: ballAmount} as _, i}
<div bind:this={bubbles[i]}
class="bubble"
style="
width: {Math.random()*25}vw;
opacity: {Math.random()*0.1};
top:{Math.random()*90}vh;
left:{Math.random()*100}vw;
"></div>
{/each}
</div>
<div class="main">
<slot></slot>
</div>
</div>
<style>
.bubble {
transition: top left 15s linear;
aspect-ratio: 1;
position: absolute;
background-color: var(--primary);
border-radius: 100%;
opacity: 0.02;
z-index: 0;
}
.bubbles {
width: 100vw;
height: 100vh;
}
.main * {
z-index: 5;
}
</style>
I attempted to utilize on:load, but encountered issues getting it to trigger the function, likewise with use:moveBubbles.