The most accelerated javascript snow
-
04-12-2019 - |
Question
I have saw a lot of them, but all they look not accelerated and slow.
For instance:
Is it possible at all to have a script that will be smooth enough on iPhone 4 / typical Android device (like Kindle Fire)?
Regards,
UPDATE
Thanks to Julian D.! designshack.net/?p=27674 is awesome! No scripts at all, pure CSS, several layers are moving in different directions. Some tips:
- Layer's patterns should be small enough (<=300px),
- There should be NO color animation (remove it from -webkit 50% and 100% keyframes),
- Use 2 layers instead of 3,
- Add -webkit-transform: translateZ(0); for all keyframes, see HTML5 transition perfomance on iPhone 4 for details, thanks to mikeyUX.
- 20s is too smoothly, use 10s.
With all these tips it's fast enough on iOS (iPod 4 Touch) to be used in a real project.
Solution
If you are talking about hardware accelerated animations you want to look at CSS Keyframe Animation-based solutions, e.g.
Here is a tutorial how to do - http://girliemac.com/blog/2009/02/18/using-keyframes-webkit-css-animation-examples/
Still, your mileage may vary. Some Android devices/version don't support hardwarde acceleration at all, you are out of luck here.