[HN Gopher] Pokemon Card Animation
___________________________________________________________________
Pokemon Card Animation
Author : parrot987
Score : 160 points
Date : 2022-10-27 20:09 UTC (2 hours ago)
(HTM) web link (deck-24abcd.netlify.app)
(TXT) w3m dump (deck-24abcd.netlify.app)
| imwillofficial wrote:
| I clicked on it and it did weird flip things seemingly random.
|
| Looks cool tho
| dwrodri wrote:
| Something like this would look amazing on Scryfall or Gatherer.
| I'm not sure how you'd go about selling this to them, but I think
| the Magic: the Gathering world would be better off for it.
| bitexploder wrote:
| Getting in touch with Scryfall is easy, go chat with April
| King. She is on Twitter. But is it really all that useful
| beyond looking cool? Granted it seems easy to implement.
| monkpit wrote:
| Really cool, a bit glitchy on iOS/safari, but what's new...
| coolca wrote:
| Wow, makes me want to collect them. I think that many card
| websites would be interested in this amazing animations.
| extasia wrote:
| Very cool
| jeroenhd wrote:
| I thought I was doing something wrong or that the cards were
| broken in Firefox for Android.
|
| Turns out the cards use the accelerometer to spin on mobile!
| That's a pretty nice trick, I love these animations!
| uneekname wrote:
| ngl I think they are broken for me on Firefox for Android. Glad
| they are working for you
| 0xCAP wrote:
| Took me a while to REALLY realize this is all CSS no WebGL. You
| just blew my mind... and ruined my weekend: I'm not leaving home
| untilI learn this sort of wizardry!
| bergenty wrote:
| This is so sad. CSS is so hard to do anything in we have to
| gush over basic animations like this. It's sad as a former
| flash developer.
| lucideer wrote:
| Flash supported CSS & JS (ActionScript) so I'm not sure what
| you're comparing. Dynamic rendering like this wasn't possible
| with CSS in Flash - you needed JS (ActionScript).
|
| People aren't gushing over this being possible in modern
| browsers - it's been possible to do this and much more in
| browsers for many years. They're gushing over it being
| possible with just CSS (no rendering using JS).
| kyle-rb wrote:
| People are gushing because it's a 3D animation with
| holographic effects, which is pretty surprising to be able to
| achieve for a primarily-2D layout language.
|
| I've never seen something this seamless and realistic built
| in flash.
| jeroenhd wrote:
| It's deceptively easy, actually:
| https://github.com/simeydotme/pokemon-cards-css/blob/main/st...
|
| CSS gradients + background images + alpha channel.
|
| There's some supporting JS + CSS as well over here:
| https://github.com/simeydotme/pokemon-cards-css/tree/main/sr...
|
| No WebGL, no <canvas>, just simple CSS. Web developers should
| really learn how to combine CSS effects because the heavy
| WebGL/WASM rendering is often complete overkill and an
| unnecessary battery drain.
|
| I also notice that on older devices, CSS
| animations/transitions/etc. run _way_ smoother than JS-powered
| renderers. I'm assuming this is because the native CSS renderer
| is quite optimized whereas the JS rendering engines are... JS,
| really.
| MitPitt wrote:
| When clicked, they do look a bit blurry up-close. Very cool
| otherwise and hopefully easily fixable.
| pell wrote:
| Truly brilliant. I'd love to know more about how this was
| achieved.
| javajosh wrote:
| The github repo[0] has no license - I didn't realize github
| allowed that.
|
| 0 - https://github.com/simeydotme/pokemon-cards-
| css/blob/main/st...
| nness wrote:
| I would assume in this instance a lack of license is equivalent
| to all rights reserved (instead of a OSS license) if they're
| within a country where copyright is vested automatically.
|
| (But yes, this could certainly use a MIT or similar.)
| lucideer wrote:
| Why would it not allow that? Github has never been exclusively
| for open source software.
| mrwizrd wrote:
| These are absolutely gorgeous. Very well done.
| batmansmom1 wrote:
| Since when did so many special cards get introduced wow! I
| remember back in the day EX was the coolest type of card around
| dom96 wrote:
| wow, these look amazing.
|
| The way the images of the cards are compressed is very good, they
| look absolutely crisp and load super fast. In fact, so crisp that
| I've wondered whether they aren't images at all but recreations
| of the cards in CSS as well.
| CGamesPlay wrote:
| Very cool, but it does not look great on Safari. The back of the
| card occludes the front of the card at some angles and
| aggressively flickers between the two images. But when it's
| working it looks great! Would make a good module in a card game
| engine.
___________________________________________________________________
(page generated 2022-10-27 23:00 UTC)