need help with js loop

Question

i'm trying to make the javascript effects show on multiple divs

i'm trying to add class attributes to and use "queryselectorAll & foreach" to loop through the javascript animation so the effects can show on multiple divs but i keep breaking the code please help

https://code.sololearn.com/W3OGQSy6Xgjs/?ref=app

Answer 1

At line 520 the parameter, can it be an htmlObject instead of a selector?

https://code.sololearn.com/W4C0atqzBzUG

Answer 2

Add a different id to each canvas element then pass the canvas id to gradient.initGradient(selector) method and be sure to use let instead of var to initialise gradient.

Replace line 709 and 710 with...
document.querySelectorAll('.gl-header').forEach(div=>{
let id = div.querySelector('canvas').id
let gradient = new Gradient();
gradient.initGradient(`#${id}`)
})
https://code.sololearn.com/W4C0atqzBzUG/?ref=app

Answer 3

That's always a good thing 😌
I'm glad i was able to help.

Answer 4

thanks ODLNT i have already done something like that before but i want to loop through just one class instead of having to write multiple ids since the results are coming from a php / mysql server and i'm not permitted to insert id names into the database

Answer 5

well, changing it didn't break anything 😅🤗, thank you so much

Answer 6

loop
Trying to understand webgl.
I was studying the code and it looked like there is a webgl renderer and debugger inside. So I did a quick google search and found something related to it.
the code:
https://gist.github.com/osied/2a8afd1fb8e5c62f6c8d14e6e477defb

The code is well comented. I think it could be simplified further if the playback controls are omitted.

And here is a site that explains how to replicate it.
https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/

Answer 7

thanks bob, kevin's site explains it so well

Answer 8

loop
Edited the webgl code and minified it.

The breakthrough for multi-element assignment is really ODLNT 's work. Without that modification, it was not possible to apply the webgl to multiple canvas element.

The javascript code now is just a few lines. But that last line is still a big one.😁

https://code.sololearn.com/WD74Q4Sowl1D/?ref=app

Answer 9

Bob_Li hehe, talk about over-engineering, on stripe's part

Answer 10

loop
that is a complicated code for a beautiful background.

Answer 11

lol

Answer 12

Hi

Answer 13

loop
I think the code was meant to be used in a web ui, so there were additional code for user interaction. But if we are just using it as a background generator, the unused portions can be edited out.
I just opened it in my ide and started commenting out parts to see what was needed and what was not.
Then used an online javascript minifier to compress the webgl part.
In the process, I started to get a general idea on what the functions do, which proved to be helpful when I started reading about webgl.
To learn more about webgl:
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial