Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

codepen.io

Post reply on HN
Print view View original

1–10 of 68 posts

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

#6

Post by TimPietrusky »

unreal37 wrote: post #3

Most of the code is actually to recreate the music. The scrolling of the text is the easy part.

The tricky part was to sync the CSS animation with the HTML -element sound (1:34 minutes long) with the help of JavaScript.

The scrolling itself is just a CSS "transform: perspective(300px) rotateX(25deg)".

You can also edit the scrolled text because I added the contenteditable="true" attribute to the titles.

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

#7

Post by pyalot2 »

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 what you do to avoid aliasing is mipmapping (you might also throw anisotropic filtering on top). However as the texture holding the rect the browser rendered isn't square power of two, some devices do not support mipmapping it. It is also quite slow to generate the mipmap for a texture every frame.

So with CSS transforms not being able to utilize mipmapping --> aliasing.

Now, in particular mipmapping text (that's supposed to be sharp) isn't even the best idea. It just gets blurry and looks unappealing (although that's better with anisotropic filtering, but then, anisotropic filtering is also expensive and not every device/GPU supports it).

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

#8

Post by TimPietrusky »

jensenbox wrote: post #5

I wish I could see it - seems busted on Chrome 29.0.1547.65 - Crunchbang Waldorf x64 Logo appears and fades out then nothing but music and blackness.

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.

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

#9

Post by TimPietrusky »

pyalot2 wrote: 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.

Post reply on HN