Crearea Marquee avansată cu animație CSS3
Astăzi vom examina “marchiză” din nou. De fapt, ne-am ocupat de acest lucru în postul nostru anterior, care vorbea despre utilizarea acestuia -webkit-Marquee proprietate, dar de data aceasta vom lua acest subiect un pic mai departe.
În acest post, vom crea un marquee-like efect folosind animația CSS3. În acest fel, vom putea adăuga mai multe funcționalități care nu ar putea fi atinse numai cu -webkit-Marquee.
Dacă nu sunteți deja familiarizat cu modulul CSS3 Animation, vă recomandăm să consultați următoarele referințe înainte de a continua cu această documentație:
- CSS3 Animații - W3School
- CSS Animații - Mozilla Dev. Reţea
De asemenea, rețineți că, în acest moment, animația CSS3 poate funcționa numai în Firefox 8+, Chrome 12+ și Safari 5.0+ cu versiunea prefixată (-Moz- și -WebKit-). Cu toate acestea, vom folosi doar versiunea oficială de la W3C fără prefixul pentru a evita suprapunerea acestui articol cu coduri inutile.
Adresați-vă Marquee Issue
Una dintre problemele cu marquee este că textul se mișcă continuu. Acest comportament este perturbator pentru citire, iar textul este dificil de citit. De data aceasta, vom incerca sa cream propria noastra versiune de marquee si sa o facem mai prietenoasa. De exemplu; în loc să se miște continuu textul, o vom opri când este pe deplin vizibilă, astfel încât utilizatorul poate citi textul pentru o clipă.
Storyboard (un fel de)
Fiecare creație și creație de design, ca un logo, o ilustrație sau un site web, începe, de obicei, cu o schiță. În domeniul producției de animație, acest lucru se face cu un storyboard. Înainte de a începe orice codificare, vom crea mai întâi a un fel de storyboard, pentru a ne ajuta să vizualizăm animația noastră.
După cum puteți vedea din tabloul de bord de mai sus, intenționăm să afișăm doar două linii de text, care se vor mișca secvențial din dreapta spre stânga.
Tabloul nostru de scenă nu este atât de complicat ca un scenariu pentru filmul real de animație, dar punctul este: acum suntem capabili să vizualizăm modul în care va arăta marca noastră.
Marcajul HTML
Deoarece animația noastră va fi simplă, marcajul HTML va fi la fel de simplu:
Cum de a adăuga WordPress Articole similare fără pluginuri
Automatizați fișierele Dropbox cu acțiuni
Stilurile de bază
Înainte de a lucra în jurul animației, să adăugăm câteva stiluri de bază. Să începem prin adăugarea unei texturi de fundal pentru html element.
html (fundal: url ('... /images/skewed_print.png'); Apoi, vom plasa marcajul în centrul ferestrei browserului și vom adăuga câteva detalii cum ar fi umbra interioară, culoarea de fundal și granițele.
.marquee width: 500px; înălțime: 50px; margine: 25 pixeli auto; overflow: ascuns; poziția: relativă; frontieră: 1px solid # 000; margine: 25 pixeli auto; culoarea fundalului: # 222; -webkit-border-radius: 5px; raza de graniță: 5px; -webkit-box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: inset 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Apoi, vom poziționa textul - care în acest caz este înfășurat într-un etichetă paragraf - absolut, și din moment ce absolut poziția va cauza colapsul elementului, va trebui să definim elementul lățimii la 100% astfel încât să acopere lățimea părintelui.
.marquee p poziție: absolută; font-familie: Tahoma, Arial, sans-serif; lățime: 100%; înălțime: 100%; marja: 0; linia-înălțime: 50px; text-align: centru; culoare: #fff; text-shadow: 1px 1px 0px # 000000; filtru: dropshadow (culoare = # 000000, offx = 1, offy = 1);
Să aruncăm o privire asupra rezultatului pentru o vreme.
În acest moment, am făcut cu toate stilurile de bază de care avem nevoie; aveți libertatea de a adăuga mai multe sau personalizate stilurile. Dar, vă sugerăm să respectați dimensiunea specificată a marcajului (înălțimea și lățimea) până la sfârșitul tutorialului.
Animația
Pe scurt, animația este o prezentare a obiectelor în mișcare. Fiecare mișcare este definită într-un interval de timp. Deci, când lucrăm la animație, avem de-a face în mare parte cu Timp. Luăm în considerare aspecte precum:
- Când începe obiectul să se miște?
- Cât durează ca obiectul să treacă de la un punct la altul?
- Când și cât trebuie să rămână obiectul la un moment dat?
În animația CSS3, timp poate fi definit cu @keyframe sintaxă. Dar, înainte de a sări în această secțiune, să specificăm mai întâi poziția inițială a textului marcajului.
Am planificat ca textul să înceapă de la dreapta, apoi să se mute în dreapta. Deci, aici o vom poziționa mai întâi spre dreapta folosind proprietatea Transformare CSS3.
.marquee p transform: translateX (100%);
Amintiți-vă, 100% pe care le-am definit pentru elementul nostru de paragraf era egal cu cel al părintelui lăţime. Deci, același lucru va fi aplicat și aici; elementul paragraf va fi tradus la dreapta pentru 100% care în acest exemplu este egal cu 500px.
keyframes
@keyframe sintaxa poate fi un pic enigma pentru unii oameni, deci aici am creat un simplu ghid vizual pentru a vă ajuta să înțelegeți cu ușurință ce se întâmplă în @keyframe sintaxă.
Faceți clic aici pentru a vedea versiunea mai mare.
Întreaga animație va dura 20 de secunde și este împărțită în două secvențe de durată 10 secunde fiecare.
În prima secvență, primul text va aluneca instantaneu din dreapta și va rămâne vizibil pentru a permite utilizatorului să citească textul, în timp ce al doilea text va rămâne ascuns. În cea de-a doua secvență, primul text al marcajului va fi glisat spre stânga, iar cel de-al doilea text va aluneca imediat din dreapta.
Și aici sunt toate codurile cheie-cheie pe care trebuie să le aplicăm pentru a rula animația.
@frame-cheie left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @ cheile de chei rămase-două 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
stânga-o cadrele cheie vor defini prima secvență a animației, în timp ce din stânga-doi cadrele cheie vor defini secvența secundară.
Aplicarea animației la Elemente
Pentru ca animația să funcționeze, nu uitați să aplicați animația elementului. Prima secvență este aplicată pentru primul text sau, în acest caz, primul paragraf, iar a doua secvență este aplicată și pentru al doilea paragraf.
.marquee p: n-copil (1) animație: stânga-unu 20s ușurința infinită; .marquee p: n-copil (2) animație: stânga-douăzeci de ani ușurează infinitul;
Cu toții am terminat cu animația noastră; să vedem rezultatele pe browser.
- Demo
- Descărcați sursa
Primă
De asemenea, putem defini textul marcajului pentru al muta de sus în jos sau invers, așa cum am făcut și în postul nostru anterior. Iată cum se poate face acest lucru; înlocuiți codurile de animație de mai sus cu acest cod de mai jos mutați textul în jos:
.marquee p transform: translateY (-100%); @ cadre cheie în jos-o 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @ cadre cheie în jos-două 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Observați că l-am schimbat Axa X la Axa Y și flip toate traducere valoare negativă pozitivă și viceversa.
De asemenea avem a redenumit Animația la down-one și down-doi, așa că trebuie să reaplicăm și numele animației în elementul paragraf.
.marquee p: n-copil (1) animație: descendent 20s ușurință infinită; .marquee p: n-copil (2) animație: în jos-două 20s ușor infinit;
Altfel, dacă vrei să-l miști opusul; de jos în sus. Iată toate codurile pe care trebuie să le aplicați:
.marquee.up p transform: translateY (100%); .marquee.up p: n-copil (1) animație: up-one 20s ușurința infinită; .marquee.up p: n-copil (2) animație: până-douăzeci de ani ușurează infinitul; @frame-cheie-o 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @frame-cheie-două 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Descărcați sursa
Concluzie
În ciuda lipsei actualului suport pentru browser, animația CSS3, dacă este făcută în mod corespunzător, va rezolva fără îndoială multe probleme de utilizare în viitor, așa cum am făcut în acest exemplu. Dacă avem nevoie doar de o animație scurtă destinată browserelor moderne, utilizarea animației CSS3 este probabil mai bună decât necesitatea de a încărca un script jQuery.
În cele din urmă, suntem conștienți de faptul că acest articol poate fi un pic copleșitor pentru unii oameni, deci dacă aveți întrebări cu privire la acest articol, nu ezitați să îl postați în secțiunea de comentarii de mai jos.
