Izveidojot papildu „Marquee” ar CSS3 animāciju
Šodien mēs apskatīsim “telts” vēlreiz. Mēs patiešām esam to aplūkojuši mūsu iepriekšējā amatā, kas runāja par -webkit-telts īpašums, bet šoreiz mēs šo tematu nedaudz turpināsim.
Šajā ziņojumā mēs izveidosim a līdzīga telts efektu, izmantojot CSS3 animāciju. Tādā veidā mēs varēsim pievienot vairāk funkciju, ko nevar sasniegt tikai ar -webkit-telts.
Ja vien jūs jau neesat iepazinušies ar CSS3 animācijas moduli, iesakām apskatīt šādas atsauces, pirms turpināt šo dokumentāciju:
- CSS3 animācijas - W3School
- CSS animācijas - Mozilla Dev. Tīkls
Ņemiet vērā arī to, ka šobrīd CSS3 animācija var darboties tikai Firefox 8+, Chrome 12+ un Safari 5.0+ versijās ar iepriekš pievienotu versiju (-moz- un -webkit-). Tomēr, izmantojot W3C oficiālo versiju, mēs neizmantosim tikai prefiksu, lai izvairītos no šī panta pārmērīgas lietošanas ar liekiem kodiem.
Meklējot Marquee problēmu
Viena no problēmām ar telti ir tas, ka teksts nepārtraukti kustas. Šī uzvedība traucē lasīt, un tekstu ir grūti lasīt. Šoreiz mēs centīsimies izveidot savu pašu telšu versiju un padarīt to lietotājam draudzīgāku. Piemēram; tā vietā, lai teksts nepārtraukti pārvietotos, mēs to apturēsim, kad tas būs pilnībā redzams, lai lietotājs kādu brīdi varētu izlasīt tekstu.
Storyboard (veida)
Katra radošā un dizaina radīšana, piemēram, logo, ilustrācija vai tīmekļa vietne, parasti sākas ar skici. Animācijas producēšanas jomā tas tiek darīts ar stāstījumu. Pirms mēs sākam jebkādu kodēšanu, mēs vispirms izveidosim sava veida sietspiede, lai palīdzētu mums vizualizēt mūsu animāciju.
Kā redzams no iepriekšējās seansa, mēs plānojam parādīt tikai divas teksta rindas, kas abas pārvietojas secīgi no labās uz kreiso pusi.
Mūsu storyboard nav tik sarežģīta kā īsta animācijas filmas sietzīme, bet punkts ir šāds: tagad mēs varam iztēloties, kā izskatīsies mūsu telts.
HTML marķējums
Tā kā mūsu animācija būs vienkārša, HTML atzīme būs tikpat vienkārša kā:
Kā pievienot WordPress saistītās ziņas bez spraudņiem
Automatizējiet Dropbox failus ar darbībām
Pamata stili
Pirms strādājat pie animācijas sīkumiem, pievienosim dažus pamata stilus. Sāksim, pievienojot fona tekstūru html elementu.
html background: url ('… /images/skewed_print.png'); Tālāk mēs novietosim telti pārlūka loga centrā, kā arī pievienosim dažas detaļas, piemēram, iekšējo ēnu, fona krāsu un robežas.
.telts platums: 500px; augstums: 50px; starpība: 25px auto; pārplūde: slēpta; pozīcija: relatīvais; robeža: 1px cietais # 000; starpība: 25px auto; fona krāsa: # 222; -webkit-robežu rādiuss: 5px; robežu rādiuss: 5px; -webkit-box-shadow: ielikt 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: ieliktnis 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Tad mēs novietosim tekstu - kas šajā gadījumā ir iesaiņots rindkopas tagā - absolūti un kopš absolūts stāvoklis radīs elementa sabrukumu, mums būs jānosaka platuma elements 100% lai segtu tā vecāku platumu.
.telts p amats: absolūts; fontu saime: Tahoma, Arial, sans-serif; platums: 100%; augstums: 100%; starpība: 0; līnijas augstums: 50px; teksta saskaņošana: centrs; krāsa: #fff; teksta ēna: 1px 1px 0px # 000000; filtrs: dropshadow (krāsa = # 000000, offx = 1, apgrūtinājums = 1);
Apskatīsim kādu rezultātu.
Šajā brīdī mēs esam darījuši visu nepieciešamo pamata stilu; jūs varat brīvi pievienot vairāk vai personalizēt stilus. Bet mēs iesakām pielīmēt mūsu norādīto maršruta dimensiju (augstumu un platumu) līdz apmācības beigām.
Animācija
Īsāk sakot, animācija ir kustīgu objektu prezentācija. Katra kustība ir noteikta laika posmā. Tātad, kad mēs strādājam pie animācijas, mēs galvenokārt nodarbojamies ar animāciju Laiks. Mēs ņemam vērā tādus jautājumus kā:
- Kad objekts sāk kustēties?
- Cik ilgi nepieciešams, lai objekts pārvietotos no viena punkta uz citu?
- Kad un cik ilgi objektam jāpaliek noteiktā punktā?
CSS3 animācijā laiks var definēt ar @keyframe sintakse. Bet, pirms pāriet uz šo sadaļu, vispirms nosakiet Marquee teksta sākuma pozīciju.
Mēs esam plānojuši, ka teksts sāksies no labās puses, tad pāriet uz labo pusi. Tātad, šeit mēs vispirms novietosim to pa labi, izmantojot CSS3 transformācijas īpašumu.
.telts p transformēt: translateX (100%);
Atcerieties, ka 100% ka mēs esam definējuši mūsu punkta elementam, bija vienādi ar tās vecāku platums. Tātad tas pats tiks piemērots arī šeit; punkta elements būs tulkots pa labi 100% kas šajā piemērā ir vienāds ar 500px.
Atslēgu rāmji
The @keyframe sintakse dažiem cilvēkiem var būt nedaudz mulsinoša, tāpēc šeit mēs esam izveidojuši vienkāršu vizuālo ceļvedi, lai palīdzētu jums viegli saprast, kas notiek @keyframe sintakse.
Noklikšķiniet šeit, lai redzētu lielāku versiju.
Visa animācija ilgs 20 sekundes un ir sadalīta divās sekvencēs, kas ir ilgstošas 10 sekundes katrs.
Pirmajā secībā pirmais teksts uzreiz slīdēs no labās puses un paliks redzams īslaicīgi, lai ļautu lietotājam lasīt tekstu, bet otrais teksts paliks slēpts. Otrajā secībā pirmais telts teksts tiks izbīdīts uz kreiso pusi, un otrais teksts tiks nekavējoties izbīdīts no labās puses.
Un šeit ir visi galvenie rāmja kodi, kas mums jāpiemēro, lai palaistu animāciju.
@keyframes left-one 0% pārveidot: translateX (100%); 10% pārveidot: translateX (0); 40% transformēt: translateX (0); 50% pārveidot: translateX (-100%); 100% pārveidot: translateX (-100%); @keyframes left-two 0% transformēt: translateX (100%); 50% pārveidot: translateX (100%); 60% transformēt: translateX (0); 90% transformēt: translateX (0); 100% pārveidot: translateX (-100%);
The pa kreisi keyframes noteiks pirmo animācijas secību, bet pa kreisi-divi keyframes noteiks otro secību.
Animācijas lietošana elementiem
Lai animācija darbotos, neaizmirstiet izmantot animāciju elementam. Pirmo secību piemēro pirmajam tekstam vai šajā gadījumā pirmajai daļai, un otro rindu piemēro arī otrajam punktam.
.telts p: n-bērns (1) animācija: kreisais-viens 20s atvieglo bezgalīgu; .marquee p: n-bērns (2) animācija: kreisie-divi 20s paliek bezgalīgi;
Mēs visi esam paveikuši ar mūsu animāciju; aplūkosim rezultātus pārlūkprogrammā.
- Demo
- Lejupielādēt avotu
Bonuss
Mēs varam arī definēt marquee tekstu, lai to pārvietotu no augšas uz leju vai otrādi, tāpat kā mēs to darījām iepriekšējā ziņojumā. Lūk, kā to izdarīt; aizstāt mūsu iepriekšminētos animācijas kodus ar tālāk norādīto pārvietojiet tekstu uz leju:
.telts p transform: translateY (-100%); @keyframes down-one 0% pārveidot: iztulkot (-100%); 10% pārveidot: translateY (0); 40% pārveidot: iztulkot (0); 50% transformēt: translateY (100%); 100% transformēt: translateY (100%); @keyframes down-two 0% transformēt: translateY (-100%); 50% pārveidot: tulkot (-100%); 60% pārveidot: iztulkot (0); 90% pārveidot: iztulkot (0); 100% transformēt: translateY (100%);
Ievērojiet, ka mēs esam mainījuši X ass uz Y ass un uzsist visu tulkošana negatīva vērtība uz pozitīvu un otrādi.
Mums ir arī pārdēvēta par animāciju uz uz leju un divas, tāpēc ir nepieciešams atkārtoti piemērot animācijas nosaukumu rindkopas elementā.
.telts p: n-bērns (1) animācija: lejup-20s atvieglo bezgalīgu; .marquee p: n-bērns (2) animācija: divi-divdesmitie gadi atvieglo bezgalīgu;
Vai arī, ja vēlaties to pārvietot pretēji; no apakšas uz augšu. Šeit ir visi kodi, kas jums jāpiemēro:
.marquee.up p transform: translateY (100%); .marquee.up p: n-bērns (1) animācija: up-one 20s atvieglo bezgalīgu; .marquee.up p: n-bērns (2) animācija: līdz pat divdesmit 20 gadiem mazina bezgalību; @keyframes up-one 0% pārveidot: translateY (100%); 10% pārveidot: translateY (0); 40% pārveidot: iztulkot (0); 50% pārveidot: tulkot (-100%); 100% pārveidot: translateY (-100%); @keyframes up-two 0% transformēt: translateY (100%); 50% transformēt: translateY (100%); 60% pārveidot: iztulkot (0); 90% pārveidot: iztulkot (0); 100% pārveidot: translateY (-100%);
- Demo
- Lejupielādēt avotu
Secinājums
Neskatoties uz pašreizējā pārlūkprogrammas atbalsta trūkumu, CSS3 animācija, ja to izdarīs pareizi, neapšaubāmi atrisinās daudzus lietojamības jautājumus nākotnē, kā mēs to esam darījuši šajā piemērā. Ja mums ir nepieciešama tikai īsa animācija, kas paredzēta mūsdienu pārlūkprogrammām, izmantojot CSS3 animāciju, iespējams, ir labāka nekā jQuery skripta ielāde..
Visbeidzot, mēs apzināmies, ka šis pants dažiem cilvēkiem var būt nedaudz pārliecinošs, tādēļ, ja jums ir kādi jautājumi par šo pantu, lūdzu, ievietojiet to tālāk komentāru sadaļā.
