Išplėstinės „Marquee“ kūrimas su CSS3 animacija
Šiandien mes apžvelgsime “palapinė” dar kartą. Mes iš tikrųjų apie tai aptarėme ankstesniame pranešime, kuriame kalbėjome apie naudojimąsi -webkit-marquee nuosavybė, tačiau šį kartą šiek tiek toliau imsimės šio klausimo.
Šiame pranešime ketiname sukurti a marquee-like efektą naudojant CSS3 animaciją. Tokiu būdu galėsime pridėti daugiau funkcijų, kurių negalima pasiekti tik su -webkit-marquee.
Jei jau nesate susipažinę su CSS3 animacijos moduliu, prieš tęsdami šį dokumentavimą rekomenduojame ieškoti šių nuorodų:
- CSS3 animacijos - W3School
- CSS animacijos - „Mozilla Dev“. Tinklas
Taip pat atkreipkite dėmesį, kad šiuo metu „CSS3“ animacija gali veikti tik „Firefox 8+“, „Chrome“ 12+ ir „Safari 5.0+“ su iš anksto pridėta versija (-moz- ir -žiniatinklio rinkinys-). Tačiau mes naudosime oficialią versiją iš W3C be prefikso, kad išvengtume šio straipsnio pernelyg didelio kodavimo.
Sprendimas „Marquee“ problema
Viena iš problemų, su kuria susiduriama, yra tai, kad tekstas nuolat juda. Šis elgesys trikdo skaitymą ir tekstą taip pat sunku skaityti. Šį kartą mes stengsimės sukurti savo „marquee“ versiją ir padaryti ją patogesnį vartotojui. Pavyzdžiui; vietoj to, kad tekstas judėtų nuolat, mes jį sustabdysime, kai jis bus visiškai matomas, todėl vartotojas gali perskaityti tekstą.
„Storyboard“ (rūšiuoti)
Kiekvienas kūrybos ir dizaino kūrimas, pavyzdžiui, logotipas, iliustracija ar svetainė, paprastai prasideda eskizu. Animacijos kūrimo srityje tai daroma naudojant storyboard. Prieš pradėdami bet kokį kodavimą, pirmiausia sukursime tarsi storyboard, padėti mums vizualizuoti mūsų animaciją.
Kaip matote iš aukščiau pateiktos siužetinės linijos, mes planuojame parodyti tik dvi teksto eilutes, kurios abu judės iš eilės iš dešinės į kairę.
Mūsų siužetinė schema nėra tokia sudėtinga kaip tikrosios animacijos filmo siužetinė schema, tačiau taškas yra toks: dabar mes galime vizualizuoti, kaip atrodys mūsų renginys.
HTML žymėjimas
Kadangi mūsų animacija bus paprasta, HTML žymėjimas taip pat bus toks paprastas kaip:
Kaip pridėti WordPress susijusių pranešimų be įskiepių
Automatizuokite „Dropbox“ failus su veiksmais
Pagrindiniai stiliai
Prieš dirbdami aplink animacijos medžiagą, pridėkime keletą pagrindinių stilių. Pradėkime pridėdami fono tekstūrą html elementas.
html background: url ('… /images/skewed_print.png'); Toliau palapinę paliksime naršyklės lango centre, taip pat pridėsime keletą detalių, tokių kaip vidinis šešėlis, fono spalva ir sienos.
.palapinė plotis: 500px; aukštis: 50px; paraštė: 25px auto; perteklius paslėptas; pozicija: santykinis; siena: 1px kietas # 000; paraštė: 25px auto; fono spalva: # 222; -webkit-border-radius: 5px; pasienio spindulys: 5px; -webkit-box-shadow: įdėklas 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); dėžutės šešėlis: įdėklas 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Tuomet tekstą, kuris šiuo atveju yra suvyniotas į pastraipos žymę, bus visiškai ir nuo absoliutus padėtis sukels elementą žlugti, turėsime apibrėžti pločio elementą 100% taip, kad apimtų jo tėvų plotį.
.marquee p pozicija: absoliutus; šrifto šeima: Tahoma, Arial, sans-serif; plotis: 100%; aukštis: 100%; marža: 0; linijos aukštis: 50px; teksto derinimas: centras; spalva: #fff; teksto šešėlis: 1px 1px 0px # 000000; filtras: dropshadow (spalva = # 000000, offx = 1, pašalinis = 1);
Pažvelkime į rezultatą.
Šiuo metu mes atlikome visus būtinus pagrindinius stilius; galite laisvai pridėti daugiau ar pritaikyti stilių. Tačiau mes rekomenduojame laikytis mūsų nurodyto stebėjimo matmens (aukščio ir pločio) iki pamokos pabaigos.
Animacija
Trumpai tariant, animacija yra judančių objektų pristatymas. Kiekvienas judėjimas yra apibrėžtas laiko juostoje. Taigi, kai dirbame su animacija, mes daugiausia susiduriame su Laikas. Mes atsižvelgiame į tokius dalykus kaip:
- Kada objektas pradeda judėti?
- Kiek laiko užtrunka, kol objektas pereis iš vieno taško į kitą?
- Kada ir kiek laiko objektas turi likti tam tikru momentu?
CSS3 animacijoje laikas galima nustatyti su @keyframe sintaksė. Tačiau, prieš šokdami į šį skyrių, pirmiausia nurodykime palapinės teksto pradinę padėtį.
Mes suplanavome, kad tekstas prasidės iš dešinės, tada pereisime į dešinę. Taigi, čia mes pirmiausia pastatysime jį į dešinę, naudojant CSS3 transformacijos savybę.
.marquee p transform: translateX (100%);
Atminkite, kad 100% kad mes apibrėžėme savo dalies elementą, buvo lygiavertis jos tėvui plotis. Taigi, tai bus taikoma ir čia; straipsnio elementas bus išverstas į dešinę 100% kuris šiame pavyzdyje yra lygus 500px.
Raktų rėmeliai
The @keyframe sintaksė kai kuriems žmonėms gali būti šiek tiek sudėtinga, todėl čia sukūrėme paprastą vaizdinį vadovą, kuris padės jums lengvai suprasti, kas vyksta @keyframe sintaksė.
Spauskite čia norėdami pamatyti didesnę versiją.
Visa animacija truks apie 20 sekundžių ir yra padalintas į dvi ilgas sekas 10 sekundžių kiekvienas.
Pirmoje eilutėje pirmasis tekstas iš karto įstumiamas iš dešinės ir išliks matomas, kad vartotojas galėtų perskaityti tekstą, o antrasis tekstas bus paslėptas. Antroje eilutėje pirmasis palapinės tekstas bus išstumiamas į kairę, o antrasis tekstas iš karto iškeliamas iš dešinės.
Ir čia yra visi raktų rėmo kodai, kuriuos turime taikyti norėdami paleisti animaciją.
@keyframes left-one 0% transformuoti: translateX (100%); 10% transformuoti: translateX (0); 40% transformuoti: translateX (0); 50% transformuoti: translateX (-100%); 100% transformuoti: translateX (-100%); @keyframes left-two 0% transformuoti: translateX (100%); 50% transformuoti: translateX (100%); 60% transformuoti: translateX (0); 90% transformuoti: translateX (0); 100% transformuoti: translateX (-100%);
The kairėje raktų rėmeliuose bus apibrėžta pirmoji animacijos seka, o kairę-du raktų rėmeliai apibrėžia antrą seką.
Animacijos taikymas elementams
Kad animacija veiktų, nepamirškite taikyti elemento elemento. Pirmoji seka taikoma pirmajam tekstui arba šiuo atveju pirmajai pastraipai, o antroji eilutė taikoma ir antrajai pastraipai.
.marquee p: n-vaikas (1) animacija: kairysis-vienas 20s palengvina begalinį; .marquee p: n-vaikas (2) animacija: kairieji-du 20s palengvina begalinį;
Mes visi darome su savo animacija; pažiūrėkime rezultatus naršyklėje.
- Demo
- Atsisiųsti šaltinį
Premija
Mes taip pat galime apibrėžti „marquee“ tekstą, kad perkeltume jį iš viršaus į apačią arba atvirkščiai, lygiai taip pat, kaip ir ankstesniame pranešime. Štai kaip tai padaryti; pakeiskite aukščiau esančius animacijos kodus su šiuo toliau esančiu perkelkite tekstą žemyn:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transformuoti: translateY (-100%); 10% transformuoti: translateY (0); 40% transformuoti: translateY (0); 50% transformuoti: translateY (100%); 100% transformuoti: translateY (100%); @keyframes žemyn du 0% transformuoti: translateY (-100%); 50% transformuoti: translateY (-100%); 60% transformuoti: translateY (0); 90% transformuoti: translateY (0); 100% transformuoti: translateY (100%);
Atkreipkite dėmesį, kad mes pakeitėme X ašis į Y ašis ir apversti visus vertimas neigiamą vertę į teigiamą ir atvirkščiai.
Mes taip pat turime pervadintas animacija į žemyn ir žemyn du, todėl taip pat reikia pakartotinai taikyti animacijos pavadinimą pastraipos elemente.
.marquee p: n-vaikas (1) animacija: 20-asis žemyn palengvina begalinį; .marquee p: n-vaikas (2) animacija: dvidešimt penki dešimtmečiai palengvina begalinį;
Arba, jei norite perkelti jį priešingai; iš apačios į viršų. Čia pateikiami visi kodai, kuriuos reikia taikyti:
.marquee.up p transformuoti: translateY (100%); .marquee.up p: n-vaikas (1) animacija: iki vieno 20s palengvina begalinį; .marquee.up p: n-vaikas (2) animacija: iki dviejų dvidešimties metų palengvina begalinį; @keyframes up-one 0% transformuoti: translateY (100%); 10% transformuoti: translateY (0); 40% transformuoti: translateY (0); 50% transformuoti: translateY (-100%); 100% transformuoti: translateY (-100%); @keyframes up-two 0% transformuoti: translateY (100%); 50% transformuoti: translateY (100%); 60% transformuoti: translateY (0); 90% transformuoti: translateY (0); 100% transformuoti: translateY (-100%);
- Demo
- Atsisiųsti šaltinį
Išvada
Nepaisant to, kad trūksta dabartinės naršyklės palaikymo, CSS3 animacija, jei ji bus tinkamai atlikta, neabejotinai išspręs daugybę naudojimo galimybių ateityje, kaip tai darėme šiame pavyzdyje. Jei mums reikia tik trumpos animacijos, skirtos šiuolaikinėms naršyklėms, naudojant CSS3 animaciją tikriausiai yra geriau nei įkelti „jQuery“ scenarijų.
Galiausiai žinome, kad šis straipsnis kai kuriems žmonėms gali būti šiek tiek didžiulis, todėl, jei turite klausimų dėl šio straipsnio, nedvejodami parašykite jį toliau pateikiamame komentarų skyriuje.
