Da jeg blev bedt om at oprette en ny 404-side til netmagazine.com, var min første tanke at oprette en CSS-animation af en slags. Jeg ville have designet til at blande sig problemfrit med den visuelle stil, der allerede var oprettet for webstedet, så jeg startede med at designe en side med 404 i Clarendon, som kan findes i navigation og overskrifter. Mit næste skridt var at slå teksten ud med et layout i aviskioskstil på nogle nylige .net-magasinomslag. For at afslutte tingene tilføjede jeg standard-udgaven 404-sidekopi og afviklede med dette:
Ikke for lurvet. Som lidt progressiv forbedring besluttede jeg at panorere magasinomslagene fra højre mod venstre med CSS-animation under markup-processen. Husk, CSS-animationer understøttes i øjeblikket kun af WebKit-browsere. Her er det korte HTML-uddrag til det animerede element:
div> div> / div> / div>
Klassen "boks" får nogle angivne dimensioner og en semi-gennemsigtig .png-billedbaggrund til 404-teksten. Ideelt set ville vi gøre dette med valgbar tekst, men tilbagefald til ikke-kompatible browsere er grimt. For at lære mere om det, se dette eksempel: trentwalton.com/bgclip/.
Her er CSS for "boks":
.boks {baggrund: url (img / 404.png) nej-gentag 0 0; kant-bund: 5 px solid # 000; højde: 343px; margin-bund: 25px; polstring-bund: 50 px;}
For at tilføje magasinomslagene ved at målrette mod den "cover_pan" klassificerede div bruger vi den samme grundlæggende idé. Du har nogle egenskaber, der hjælper med at dimensionere layout og placere magasinet cover.webp bag 404.png.
.cover_pan {baggrund: #fff url (img / covers.webp) gentag 1055px bund; højde: 343px; margen til venstre: 1 px; overløb: skjult; position: relativ; bredde: 99,5%; z-indeks: -1; -moz-animation-navn: pan; -moz-animation-varighed: 40'erne; -moz-animation-iteration-count: uendelig; -moz-animation-timing-funktion: lineær; -webkit-animationsnavn: pan; -webkit-animation-varighed: 40'ere; -webkit-animation-iteration-count: uendelig; -webkit-animation-timing-funktion: lineær;}
Bemærk den anden halvdel af de ejendomme, der er angivet her. Vi har givet animationen et navn (pan), indstillet timingen til 40 sekunder og indstillet den til at spille på en kontinuerlig løkke med et uendeligt antal iterationer. Endelig indstiller vi et stabilt, jævnt tempo ved at indikere en lineær timing-funktion. Hvis vi brugte noget som lempelse eller lethed til timing, ville det ramme brugerne med et skak hver gang det sløjfer.
Nu til keyframe-animationen:
@ -moz-keyframes panorerer {0% {baggrundsposition: 1338px bund; } 100% {baggrundsposition: venstre nederst; }} @ - webkit-keyframes panorer {0% {baggrundsposition: 1338 px bund; } 100% {baggrundsposition: venstre nederst; }}
Dette er en af de mest enkle implementeringer, du kan vælge. Over 40 sekunder glider vi baggrundspositionen for .cover_pan fra højre til venstre.
For at lære mere om CSS-visuelle effekter skal du kigge på denne artikel, som jeg var forfatter sammen med min Paravel-kohorte, Dave Rupert: www.netmagazine.com/tutorials/add-cutting-edge-visual-effects.
Firefox 5 frigives i dag med support til CSS-animationer! Alle animerede egenskaber i denne vejledning er opdateret til at omfatte moz-præfikset.
