Live data from Hacker News

Star Wars opening crawl from 1977 in HTML/CSS/JS

codepen.io

41–50 of 68 posts

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#41
post #35

Earlier quoted context omitted.

Are you able to upload a screenshot of the aliasing problem somewhere? Running on a retina MBP, both Safari and Chrome render the text pin-sharp with no noticeable aliasing.

http://i.imgur.com/UzZYLW5.png Check the farthest text. It's even worse in motion because the aliasing changes discretely.

It looks fine on a Retina MBP. The farthest text gets a little tiny bit of flickering maybe, but it looks sharp all the way until it fades out. Nothing like that.

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#43
post #7

Ah my eyes, the aliasing. If anybody's interested why there's aliasing it's important to know how CSS transforms work. If you transform, the browser lifts the transformed rectangle into its own layer and renders its content to a texture. Then, later, it is composited with the page by blitting that texture with whatever transformation was applied. So CSS transforms are an application of texturing. And in texturing wha…

So what do you suggest I should change? Thanks in advance.

Could be the speed, content, or something else, but the text at http://fotcorn.github.io/StarRSS/ doesn't seem to shake (as much, anyway) as it fades.

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#44
post #26

Earlier quoted context omitted.

Yeah I know and it's freaking me out. I already use the attribute preload="auto" of the -element, but it's not enough. Do you know any better ways to preload it?

I'm assuming there's an event for when the audio is loaded... maybe hook up the animation to that?

canplaythrough

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#45
post #41
post #35

Earlier quoted context omitted.

http://i.imgur.com/UzZYLW5.png Check the farthest text. It's even worse in motion because the aliasing changes discretely.

It looks fine on a Retina MBP. The farthest text gets a little tiny bit of flickering maybe, but it looks sharp all the way until it fades out. Nothing like that.

The flickering is what kaoD referred to with discretely changing aliasing. It shouldn't happen, ideally. Small pixels make it a little less jarring but still noticeable.

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#46
post #43

Earlier quoted context omitted.

So what do you suggest I should change? Thanks in advance.

Could be the speed, content, or something else, but the text at http://fotcorn.github.io/StarRSS/ doesn't seem to shake (as much, anyway) as it fades.

Exhibits exactly the same issue here. Horrible flickering of horizontal lines because those alternate between being a pixel and no pixel wide.

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#49
post #15

Earlier quoted context omitted.

This sounds like 3D is turned off in your Chrome. Can you please check your settings chrome://flags. Maybe "GPU compositing on all pages" is turned off -> turn it on.

I have the same issue with no text after the logo. My "GPU compositing on all pages" was set to the default, but after changing it to "enabled" I still see no text. Version 31.0.1626.5 dev-m Aura SyzyASan

After enabing and relaunching chrome the text now works for me. (31.0.1612.0), what does chrome://gpu/ tell you?

Re: Star Wars opening crawl from 1977 in HTML/CSS/JS

#50
post #40

Back in 1994, my 486 had no issue rendering the Star Wars opening crawl in a sweet game, Star Wars: TIE Fighter. Fast forward 20 years, and thanks to the wonders of web, my computer can't even render it correctly. I get a blank screen after the star wars logo. So much for progress. http://www.youtube.com/watch?v=IYks9ZfupZ0

To a tech naive eye, this CSS looks and sounds much better than the 486 version. If I had to show my granny my first pc (a ~20 kilos 486) playing the game intro and a retina ipad rendering this css effect, she'd probably be amazed by tech progress in these last 20 years. Further, I can't see how the next 20 years may produce a greater improvement in this render than the past 20s. It's probably just that we can't fully appreciate progress from within..
Post reply on HN