123
user profile image

I've tried to use the SVG element to create an animated pattern. This is as far as I've come but unfortunately, the animations aren't very performant, so I've added a toggle to turn them on/off.

Parallax stars by https://codepen.io/saransh/pen/BKJun

Comments

  1. Wow, so cool. but how about you try it with a little latency among the same animations? so they are not completely synchronized.

  2. @koorosh-m Originally that was the plan, but I couldn't find a way to do it nicely. I'm using the symbol/use elements, so for each "object", there's an original (hidden) version that has the animation, and many copies that show on screen. So I can't add any delay since it's the same animation. I tried to make it so each copy has its own animation, but encountered some serious performance issues. But really, it's the first time I play around with the element, so I'm happy to hear any suggestion!

  3. Yeah you're right. Adding all these animations separately will put a lot of load maybe even affect the page loading time. I'm pretty new and dumb to these concepts right now, but I'll google it when I got the time to check what others have come up with :-?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...