3 ms·
Or alternatively, write it as a CSS animation and modify it on collision.
by XaspR8d 6y ago
Or alternatively, write it as a CSS animation and modify it on collision.
- Cyykratahk 6y agoExactly. This is what CSS Animations [1] were made for. And you don't even need to do collision detection, as CSS can already alternate directions and loop infinitely. https://bouncing-logo-css.glitch.me/ https://bouncing-logo-css.glitch.me/ Just needed a tiny bit of JS to set the sizes and randomise the logo colour. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animati...
- XaspR8d 6y agoNice demo. I was curious how you were going to avoid collision -- my assumption was since the pattern wasn't a "single cycle" loop (whose total length presumably depends on the LCM of the width and height) that the animation setting would either need to be very complicated or changed periodically, but you cleverly sidestepped the whole problem by applying X and Y translations to different wrappers so they can each have their own fixed period: smart!