Totally curious as to how this gorgeous “light show” was created.
Could it be an extremely elaborate GIF?
If it’s not a GIF, is it video? If it is video, how is it able to play automatically?
If not either of the above, could it have been generated by some procedural programming?
Anyone have a take? Thanks.
Looks like an enormous and complex CSS animation that will require a lot of time consuming browser time.
All you need to do is add their code to your web site or ask an unscrupulous Stack developer to make a stack out of it.
IMHO this type of design is all about web designer showboating. It says nothing about the service or prouct and there are some stunning images further down the page that this animated disco experience hides.
Google is not impresssed with this site.
Check out https://pagespeed.web.dev/report?url=https%3A%2F%2Fkoete.pe%2F
You are certainly correct, Gary, that Google does not much like this site. But I must admit I am guilty of not being totally averse to a little “showboating”. I am an artist, I can’t help it.
For the record, it is a Readymag project, a very tasty online website design service. Wondering to what extent the speed problem may be with the extravagant animation, or the provider itself. Probably the former.
In any case, in a gazillion years I would not, could not even be able to steal someone’s code, but I am curious how, as you suggest, it could even be done. Checked out the page with Inspector, and saw nothing that would suggest the CSS that created that animation.
Anyway, thanks for the feedback. No pun intended, but it was most illuminating.
Wasn’t suggesting that at all. There are many of these type of animations that creative and clever coders display on places such as Codepen.
Here’s one https://codepen.io/animationbro/pen/xxGVNeG
If you search about you will find many familiar effects and even some that have been turned into stacks to buy.
This is not a background animation it is just a video in an iframe. You can see the Vimeo video that he is using here:
https://player.vimeo.com/video/457492714
CSS or JS - as @Webdeersign says, background position animations are extremely GPU intensive and should be avoided.
The page developer obviously decided that the video load time was worth it. I personally don’t agree but each to their own.
I did see the reference to Vimeo when I checked out the Inspector, but could not find the original myself. So well done, Sherlock. And thanks.
So my burning question remains on how to present video automatically without the overlay thing-a-ma-jiggies. I had previously thought you couldn’t do it, but obviously you can. Have the browser rules changed? Or is it because there is no sound to the video, and is therefore permissible?
What would be the mechanism for doing that?
Video can autoplay if it is muted and has a few other attributes set. Sections Pro has supported this for over 4 years, other stacks have since done similar.
If you want to use Vimeo rather than self hosted video, you would also need a Vimeo Pro account in order to embed or iFrame it without sound and with the other necessary options set. If you just use a self hosted mp4 then obviously it’s all free.
Does Sections Pro work with F6? I thought I understood that, tragically, your stacks were no longer compatible.
Sections Pro has always and still does work with any theme.
Not so, I don’t know who lead you to that belief but I’m pleased to tell you that the compatibility has not changed.
Good news.