index.html (3.4 KB)
i saw the background image of infinityfree.com, and i thought you could use this
it is moving too and it is interactive. Look here
it is moving too and it is interactive. Look here
1 Like
OK…WAAAAY too addictive relative to how (deceptively-) simple it is. Took me a fair few minutes to pry myself away from it 
Nice work to the coder - .js stuff is fun, sometimes… 
2 Likes
Interestingly, the background on the IF website was actually created (in my opinion) from particles.js (or some other variation).
You can see that when you add the filter invert
Someone just took a picture of it and made it very transparent so that the mesh is not visible and we only see the nodes (circles/bubbles)
Probably to reduce the requirements…and the point is not to distract.
My only complaint is that when scrolling, “the bubbles” get mixed with the text and then the text is unreadable because some containers do not have a background, and that is a design flaw
5 Likes
So the answer to OP’s suggestion is that IF actually uses that…just the static version without animation and without javascript hahaha 
6 Likes
That’s entirely possible. I didn’t create that image myself, it was provided to me by the designer.
It’s probably possible to make it with Javascript (and the Grendel Hosting site used to have something like that), but making it dynamic is usually too distracting, and can be quite slow to render.
I remember getting a really pretty design for a site once with a fancy animated hero setting, but when spending more than 10 seconds on the page resulted in my laptop fan spinning up, despite being a pretty powerful device. So static images have their advantages.
7 Likes
You should blow it out with an air compressor
Complex canvas animations are demanding, especially when the resolutions are higher and it depends on whether it is done by the GPU or the CPU (depending on the browser settings) .
Those animations that look really cool are better captured as a video and streamed as background rather than the GPU having to render it on the fly,
but most animations are more acceptable for some unique private websites than for hosting.
If you would like something to “move” on the website, I would recommend using animated icons (there are really good ones online) and only on mouseover, or some effects with borders instead of some animated backgrounds.
For example something like this (it doesn’t have to be in that color):
4 Likes
The advantage of rendering on the fly is that you can make it dynamic, e.g. make the animation dependent on the mouse cursor. But besides that, yeah, completely unnecessary.
particles.js does seem very lightweight though. Video rendering isn’t free either, and downloading a video might be much more bandwidth intensive than a small bit of JS.
5 Likes
my laptop’s 1366x768 lcd with extreme backlight washout is so crap I have never actually seen anything on the background 
3 Likes
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.