Când mi s-a cerut să construiesc o nouă pagină 404 pentru netmagazine.com, primul meu gând a fost să creez un fel de animație CSS. Am vrut ca designul să se amestece perfect cu stilul vizual deja stabilit pentru site, așa că am început prin proiectarea unei pagini cu 404 set în Clarendon, care poate fi găsită în navigare și titluri. Următorul meu pas a fost să elimin textul cu un aspect de chioșc de ziar al unor coperte recente ale revistelor .net. Pentru a încheia lucrurile, am adăugat copia standard de 404 pagini și am încheiat cu aceasta:
Nu prea ponosit. Ca un pic de îmbunătățire progresivă, am decis să panoram coperțile revistei de la dreapta la stânga cu animație CSS în timpul procesului de marcare. Nu uitați, animațiile CSS sunt acceptate în prezent numai de browserele WebKit. Iată scurtul fragment HTML pentru elementul animat:
div> div> / div> / div>
Clasa „casetă” primește câteva dimensiuni specificate și un fundal de imagine .png semi-transparent pentru textul 404. În mod ideal, am face acest lucru cu text selectabil, dar soluțiile de rezervă pentru browserele neconforme sunt inestetice. Pentru a afla mai multe despre asta, consultați acest exemplu: trentwalton.com/bgclip/.
Iată CSS pentru „casetă”:
.box {background: url (img / 404.png) no-repeat 0 0; partea de jos a frontierei: 5 px solid # 000; înălțime: 343px; marginea de jos: 25 px; fund de umplutură: 50 px;}
Acum, pentru a adăuga coperțile revistei, vizând acel div clasificat „cover_pan”, folosim aceeași idee de bază. Aveți câteva proprietăți care ajută dimensiunile aspectului și cuibărește coperta revistei.webp din spatele 404.png.
.cover_pan {fundal: #fff url (img / covers.webp) repetați 1055px jos; înălțime: 343px; margine-stânga: 1px; overflow: ascuns; poziție: relativă; lățime: 99,5%; indice z: -1; -moz-animation-name: pan; -moz-animatie-durata: 40s; -moz-animație-iterație-număr: infinit; -moz-animatie-cronometrare-functie: liniara; -webkit-animation-name: pan; -webkit-animatie-durata: 40s; -webkit-animation-iteration-count: infinit; -webkit-animation-timing-function: linear;}
Observați a doua jumătate a proprietăților declarate aici. Am dat animației un nume (pan), i-am setat timpul la 40 de secunde și l-am setat să se joace pe o buclă continuă cu un număr de iterații infinit. În cele din urmă, stabilim un ritm constant și uniform, indicând o funcție de sincronizare liniară. Dacă am folosi ceva cum ar fi ușurința sau ușurința pentru sincronizare, ar fi lovit utilizatorii cu o zguduitură de fiecare dată când arunca bucle.
Acum, pentru animația cadrului cheie:
@ -moz-keyframes pan {0% {background-position: 1338px jos; } 100% {fundal-poziție: stânga jos; }} @ - panou webkit-keyframes {0% {background-position: 1338px jos; } 100% {fundal-poziție: stânga jos; }}
Aceasta este una dintre cele mai simple implementări pe care le-ați putea alege. Peste 40 de secunde, glisăm poziția de fundal a .cover_pan de la dreapta la stânga.
Pentru a afla mai multe despre efectele vizuale CSS, aruncați o privire la acest articol pe care l-am scris împreună cu cohorta mea Paravel, Dave Rupert: www.netmagazine.com/tutorials/add-cutting-edge-visual-effects.
Firefox 5 lansează astăzi, cu suport pentru animațiile CSS! Toate proprietățile animate din acest tutorial au fost actualizate pentru a include prefixul moz.
