A short time ago in a browser very, very close…
EPIZODA IV
NOVA NADA ZA WEB
Web je u stanju kompletnog raspada.
Browseri i dalje nisu kompatibilni. Svaki prikazuje šta on hoće. Za nevolju neko je smislio da je JavaScript najbolji jezik za web i nastavio njegov razvoj. Dobio je podršku čak i od imperijalnog veća u Redmondu.
Svaki developer sa jednom godinom iskustva odlučio je da napravi svoj JavaScript framework. Naravno, ništa ni sa čim nije kompatibilno, pa se galaksija nalazi na rubu propasti. Ali zato CSS3 radi skoro pa svuda u novim browserima što je i jedini razlog za postojanje ovog fajla.
Ovo je demonstracija Star Wars skrolovanog 3D teksta u CSS3. Nema nikakvu praktičnu svrhu osim da izgleda dobro i impresionira prijatelje.
Car koji je ovo napravio je @craigbuckler.
Originalni kod je na sitepoint.com/
css3-starwars-scrolling-text/.
Ostatak teksta je njegov.
Before movie-buffs start ranting, I realize Star Wars wasn't the first to use crawling 3D titles, but few of you will remember the Flash Gordon series or the 1936 adaption of HG Wells' "Things to Come".
Also, by mentioning "Star Wars", everyone will understand what I mean. And I'll receive several thousand more visits.
The scrolling titles work well in Chrome, Safari and Firefox. Opera doesn't implement 3D transforms yet, but the text will scroll. IE users receive a blank page. A shame, but IE10 should support it.
So how does it work? Well, it's fairly simple. We have an outer absolute DIV (#titles) which is rotated along the X-axis using perspective to give the impression of depth. The same DIV also has an :after psuedo-element which applies a linear gradient so the text appears to fade out.
Inside, we have another absolutely-positioned DIV which contains the text (#titlecontent). The top is set to 100% to ensure it starts off-screen then uses CSS3 animation to move it upward over time. No JavaScript is required.
You will probably need to adjust the movement amount and timing depending on the quantity of text you want to show. The 3D depth can also be tweaked in the #titles declaration.
All the code is contained in this single HTML file…
View the source, Luke!