Täiustatud Marquee loomine CSS3 animatsiooniga
Täna vaatame “telk” veelkord. Tegelikult oleme seda juba oma eelmises postituses käsitlenud, mis rääkis selle kasutamisest -webkit-telk vara, kuid seekord võtame selle teema veidi kaugemale.
Selles postituses loome a telgilaadne CSS3 animatsiooni abil. Nii saame lisada rohkem funktsioone, mida ei saa saavutada ainult -webkit-telk.
Kui te pole juba CSS3 animatsioonimooduliga tuttav, soovitame teil enne käesoleva dokumentatsiooni kasutamist tutvuda järgmiste viidetega:
- CSS3 animatsioonid - W3School
- CSS animatsioonid - Mozilla Dev. Võrk
Pange tähele ka, et CSS3 animatsioon töötab hetkel Firefox 8+, Chrome 12+ ja Safari 5.0+ puhul ainult eesliidese versiooniga (-moz- ja -webkit-). Me kasutame siiski ainult W3C ametlikku versiooni ilma eesliideta, et vältida selle artikli üleliigset koormamist üleliigsete koodidega.
Marquee probleemi lahendamine
Üks tellija probleemidest on see, et tekst liigub pidevalt. See käitumine häirib lugemist ja teksti on samuti raske lugeda. Seekord püüame luua oma tellija versiooni ja muuta see kasutajasõbralikumaks. Näiteks; selle asemel, et tekst liiguks pidevalt, lõpetame selle, kui see on täielikult nähtav, nii et kasutaja saab teksti hetkeks lugeda.
Storyboard (omamoodi)
Iga loominguline ja disaini loomine, nagu logo, illustratsioon või veebisait, algab tavaliselt visandiga. Animatsioonitootmise valdkonnas toimub see süžeeskeemiga. Enne mis tahes kodeerimist alustame kõigepealt a omamoodi storyboard, aidata meil visualiseerida meie animatsiooni.
Nagu näete ülaltoodud stsenaariumist, plaanime näidata ainult kahte teksti rida, mis mõlemad liiguvad järjest paremalt vasakule.
Meie süžeeskeem ei ole nii keeruline kui tegelik animatsioonifilmide süžeeskeem, kuid punkt on järgmine: me saame nüüd visualiseerida, kuidas meie telk välja näeb.
HTML-märgistus
Kuna meie animatsioon on lihtne, on HTML-märgistus sama lihtne kui:
Kuidas lisada WordPressiga seotud postitusi ilma pluginateta
Automatiseerige Dropboxi failid toimingutega
Põhilised stiilid
Enne animatsioonimaterjali ümber töötamist lisame mõned põhilised stiilid. Alustame, lisades html element.
html background: url ('… /images/skewed_print.png'); Seejärel paigutame telgi brauseri akna keskele ning lisame mõned üksikasjad, nagu sisemine vari, taustavärv ja piirid.
.telk laius: 500 px; kõrgus: 50 px; marginaal: 25px auto; ülevool: peidetud; positsioon: suhteline; piir: 1px tahke # 000; marginaal: 25px auto; taustavärv: # 222; -webkit-border-radius: 5px; raadius: 5 px; -webkit-box-shadow: sisend 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); kast-vari: sisend 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Siis paigutame teksti - mis sel juhul on pakitud paragrahvi taga - absoluutselt ja alates absoluutne asend põhjustab elemendi kokkuvarisemise, peame määrama laiuse elemendi 100% nii, et see kataks tema vanema laiuse.
.telk p positsioon: absoluutne; font-pere: Tahoma, Arial, sans-serif; laius: 100%; kõrgus: 100%; varu: 0; rea kõrgus: 50 px; teksti joondamine: keskus; värv: #fff; teksti vari: 1px 1px 0px # 000000; filter: dropshadow (värv = # 000000, offx = 1, offy = 1);
Vaatame mõnda aega tulemust.
Siinkohal oleme teinud kõik peamised stiilid, mida me vajame; Teil on vabadus lisada stiile rohkem või isikupärastada. Kuid soovitame jääda meie määratud marquee mõõde (kõrgus ja laius) kuni õpiku lõpuni.
Animatsioon
Lühidalt öeldes on animatsioon liikuvate objektide esitlus. Iga liikumine on määratletud ajakavas. Niisiis, kui me töötame animatsiooniga, tegeleme peamiselt sellega Aeg. Võtame arvesse selliseid küsimusi nagu:
- Millal objekt liigub?
- Kui kaua kulub objekti liikumine ühest punktist teise?
- Millal ja kui kaua peaks objekt teatud punktis jääma?
CSS3 animatsioonis aega saab määrata @keyframe süntaks. Kuid enne selle sektsiooni hüppamist täpsustame kõigepealt tellija teksti alguspunkti.
Oleme planeerinud, et tekst algab paremalt ja liigub paremale. Niisiis, siin me paigutame selle kõigepealt paremale, kasutades CSS3 transformatsiooni omadust.
.telk p transform: translateX (100%);
Pea meeles, et 100% see, mida me oleme määratlenud meie lõikeelemendi jaoks, oli võrdne tema vanemaga laius. Sama kehtib ka siin; lõikelement on tõlgitud paremale 100% mis selles näites on võrdne 500tk.
Võtmefailid
The @keyframe süntaks võib mõnele inimesele mõnevõrra mõistatuslik olla, nii et siin oleme loonud lihtsa visuaalse juhendi, mis aitab teil kergesti mõista, mis toimub @keyframe süntaks.
Suurema versiooni vaatamiseks klõpsake siia.
Kogu animatsioon kestab umbes 20 sekundit ja jaguneb kaheks järjestuseks 10 sekundit iga.
Esimeses järjestuses siseneb esimene tekst koheselt paremale ja jääb hetkeks nähtavaks, et kasutaja saaks teksti lugeda, samas kui teine tekst jääb peidetud. Teises järjekorras nihkub esimene telgtekst vasakule ja teine tekst paremale siseneb paremale.
Ja siin on kõik võtmefailide koodid, mida peame animatsiooni käivitamiseks rakendama.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
The vasakule võtmefailid määravad animatsiooni esimese jada vasak-kaks võtmefailid määratlevad teise järjestuse.
Animatsiooni rakendamine elementidele
Et animatsioon toimiks, ärge unustage animatsiooni elementi kasutada. Esimest järjestust rakendatakse esimese teksti või antud juhul esimese lõigu puhul ja teist järjestust kasutatakse ka teise lõigu puhul.
.telk p: n-laps (1) animatsioon: vasakpoolne 20s lõpmatus; .marquee p: n-laps (2) animatsioon: vasak-kaks 20-d kergendavad lõpmata;
Me kõik oleme teinud oma animatsiooniga; Vaatame tulemusi brauseris.
- Demo
- Allalaadimise allikas
Boonus
Saame määratleda ka telje teksti, et liigutada seda ülalt alla või vastupidi, nagu me tegime ka eelmises postituses. Siin on, kuidas seda teha; asenda meie ülaltoodud animatsioonikoodid allpool olevaga liigutage teksti allapoole:
.telk p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Pange tähele, et oleme muutnud X-telg kuni Y-telg ja klappige kõik tõlge negatiivne väärtus positiivsele ja vastupidi.
Meil on ka nimega Animatsioon kuni alla-üks ja alla-kaks, seega peame ka Animatsiooni nime uuesti lõikelementi rakendama.
.telk p: n-laps (1) animatsioon: alla 20-aastased lihtsustavad lõpmatuid; .marquee p: n-laps (2) animatsioon: kakskümmend kaheksakümnendat kergendavad lõpmatuid;
Või muidu, kui soovite seda teisiti teisaldada; alt üles. Siin on kõik koodid, mida peate rakendama:
.marquee.up p transform: translateY (100%); .marquee.up p: n-laps (1) animatsioon: kuni üks 20s lõpmatu; .marquee.up p: n-laps (2) animatsioon: kuni kakskümmend 20s lõpmata lõdvendavad; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Demo
- Allalaadimise allikas
Järeldus
Hoolimata praeguse brauseritoe puudumisest lahendab CSS3 animatsioon kahtlemata tulevikus palju kasutatavuse küsimusi, nagu me oleme selles näites teinud. Kui vajame ainult lühikest animatsiooni, mis on mõeldud kaasaegsetele brauseritele, on CSS3 animatsioon ilmselt parem kui jQuery skripti laadimine.
Lõpuks oleme teadlikud, et see artikkel võib mõnele inimesele olla mõnevõrra ülekaalukas, nii et kui teil on selle artikliga seotud küsimusi, võite selle allpool kommentaaride jaotises.
