Edistyneen Marquee -luettelon luominen CSS3-animaatiosta
Tänään tarkastelemme “teltta” taas kerran. Olemme todellakin käsitelleet sitä edellisessä postissamme, josta puhuimme -WebKit-teltta omaisuutta, mutta tällä kertaa otamme tämän aiheen hieman pidemmälle.
Tässä viestissä luomme a teltta-like CSS3-animaation avulla. Näin voimme lisätä lisää toimintoja, joita ei voitu saavuttaa vain -WebKit-teltta.
Jos et ole jo perehtynyt CSS3-animaatiomoduuliin, kannattaa tarkastella seuraavia viittauksia ennen kuin jatkat tätä dokumentaatiota:
- CSS3-animaatiot - W3School
- CSS-animaatiot - Mozilla Dev. verkko
Huomioi myös, että tällä hetkellä CSS3-animaatio voi toimia vain Firefox 8+: ssa, Chrome 12+: ssa ja Safari 5.0+: ssa, jossa on etuliite (-MOZ- ja -webKit-). Käytämme kuitenkin vain W3C: n virallista versiota ilman etuliitettä, jotta tämä artikkeli ei ylitä ylimääräisiä koodeja.
Marquee-ongelman ratkaiseminen
Yksi telineen ongelmista on, että teksti liikkuu jatkuvasti. Tämä käyttäytyminen häiritsee lukemista, ja tekstiä on myös vaikea lukea. Tällä kertaa yritämme luoda oman telakan version ja tehdä siitä käyttäjäystävällisemmän. Esimerkiksi; sen sijaan, että teksti siirtyisi jatkuvasti, lopetamme sen, kun se on täysin näkyvissä, joten käyttäjä voi lukea tekstiä hetkeksi.
Kuvakäsikirjoitus (eräänlainen)
Jokainen luova ja muotoilun luominen, kuten logo, kuva tai verkkosivusto, alkaa yleensä luonnoksesta. Animaation tuotannon alalla tämä tapahtuu kuvakäsikirjoituksella. Ennen kuin aloitamme minkä tahansa koodauksen, luomme ensin a eräänlainen storyboard, auttaa meitä visualisoimaan animaatiomme.
Kuten edellä olevasta kuvakäsikirjoituksesta näet, aiomme näyttää vain kaksi tekstiriviä, jotka molemmat liikkuvat peräkkäin oikealta vasemmalle.
Kuvakäsikirjoituksemme ei ole niin monimutkainen kuin todellinen animaatioelokuvan kuvakäsikirjoitus, mutta se on se, että voimme visualisoida, miten telttamme näyttää.
HTML-merkintä
Koska animaatio on yksinkertainen, HTML-merkintä on myös yhtä yksinkertainen kuin:
WordPressiin liittyvien viestien lisääminen ilman laajennuksia
Automatisoi Dropbox-tiedostot toiminnoilla
Perustyylit
Ennen kuin teet töitä ympäri animaatiotavaraa, lisätään joitakin perusasioita. Aloitetaan lisäämällä taustan tekstuuri html elementti.
html background: url ('… /images/skewed_print.png'); Seuraavaksi sijoitamme telineen selaimen ikkunan keskelle sekä lisää joitakin yksityiskohtia, kuten sisäisen varjon, taustavärin ja reunat.
.teltta leveys: 500px; korkeus: 50px; marginaali: 25px auto; ylivuoto piilotettu; asema: suhteellinen; raja: 1px kiinteä # 000; marginaali: 25px auto; taustaväri: # 222; -webkit-border-radius: 5px; raja-säde: 5px; -webkit-box-shadow: 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, 2); box-shadow: 0px 2px 2px rgba (0, 0, 0, 5), 0px 1px 0px rgba (250, 250, 250, .2);
Sitten sijoitamme tekstin - joka tässä tapauksessa on kääritty kappaleen tunnisteeseen - ehdottomasti ja sen jälkeen absoluuttinen sijainti aiheuttaa tekijän romahtamisen, meidän on määriteltävä leveyden elementti 100% kattamaan sen vanhemman leveys.
.marquee p sijainti: absoluuttinen; font-perhe: Tahoma, Arial, sans-serif; leveys: 100%; korkeus: 100%; marginaali: 0; linjan korkeus: 50px; text-align: center; väri: #fff; teksti-varjo: 1px 1px 0px # 000000; suodatin: dropshadow (väri = # 000000, offx = 1, offy = 1);
Katsotaanpa jonkin aikaa tulosta.
Tässä vaiheessa olemme tehneet kaikki tarvitsemamme perustyylit; voit vapaasti lisätä tai mukauttaa tyylit. Suosittelemme kuitenkin, että noudatat määritellyn marquee-ulottuvuuden (korkeus ja leveys) opetusohjelman loppuun asti.
Animaatio
Lyhyesti sanottuna animaatio on liikkuvien kohteiden esitys. Jokainen liike määritellään aikakehyksessä. Joten, kun työskentelemme animaatiossa, käsittelemme enimmäkseen Aika. Otamme huomioon muun muassa seuraavat asiat:
- Milloin kohde alkaa liikkua?
- Kuinka kauan kestää, kun kohde siirtyy pisteestä toiseen?
- Milloin ja kuinka kauan kohteen tulisi pysyä tietyssä pisteessä?
CSS3-animaatiossa aika voidaan määrittää @keyframe syntaksi. Mutta ennen kuin siirryt tähän osioon, määrittele ensin marquee-tekstin aloitusasento.
Olemme suunnitelleet, että teksti alkaa oikealta ja siirry oikealle. Joten tässä asetamme sen ensin oikealle käyttämällä CSS3-muunnosominaisuutta.
.marquee p transform: translateX (100%);
Muista, että 100% että olemme määritelleet kappaleelementille, oli sama kuin sen vanhempi leveys. Sama pätee myös täällä; kappaleelementti on käännetty oikealle 100% joka tässä esimerkissä on yhtä suuri kuin 500px.
avainkehyksiä
@keyframe syntaksi voi olla hieman hämmentävä joillekin ihmisille, joten tässä olemme luoneet yksinkertaisen visuaalisen oppaan, jonka avulla voit helposti ymmärtää, mitä tapahtuu @keyframe syntaksi.
Klikkaa tästä nähdäksesi suuremman version.
Koko animaatio kestää noin 20 sekuntia ja se on jaettu kahteen jaksoon, jotka kestävät 10 sekuntia kukin.
Ensimmäisessä sekvenssissä ensimmäinen teksti liukuu välittömästi oikealta ja pysyy näkyvissä hetkellisesti, jotta käyttäjä voi lukea tekstiä, kun taas toinen teksti jää piiloon. Toisessa sekvenssissä ensimmäinen ruudun teksti liukuu vasemmalle ja toinen teksti siirtyy välittömästi oikealta.
Ja tässä on kaikki avainkehyksen koodit, joita meidän on sovellettava animaation suorittamiseen.
@keyframes left-one 0% muuntaa: translateX (100%); 10% muunnos: translateX (0); 40% muunnos: translateX (0); 50% muunnos: translateX (-100%); 100% muunnos: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% muunnos: translateX (100%); 60% muunnos: translateX (0); 90% muunnos: translateX (0); 100% muunnos: translateX (-100%);
vasen-yksi näppäinkehykset määrittävät animaation ensimmäisen sekvenssin, kun taas vasen kaksi näppäinkehykset määrittävät toisen sekvenssin.
Animaation soveltaminen elementteihin
Jotta animaatio toimisi, älä unohda soveltaa animaatiota elementtiin. Ensimmäistä sekvenssiä sovelletaan ensimmäiseen tekstiin tai tässä tapauksessa ensimmäiseen kohtaan ja toista sekvenssiä sovelletaan myös toiseen kohtaan.
.marquee p: n-lapsi (1) animaatio: vasen-yksi 20s helpottaa ääretöntä; .marquee p: n-lapsi (2) animaatio: vasen-kaksi 20s helpottaa ääretöntä;
Me kaikki olemme tehneet animaatiomme; katsotaan tulokset selaimessa.
- esittely
- Lataa lähde
Bonus
Voimme myös määrittää marquee-tekstin siirtääkseen sen ylhäältä alas tai päinvastoin, aivan kuten edellisessä postissa. Tässä on, miten se tehdään; korvaa yllä olevat Animaatiokoodit alla olevalla siirrä tekstiä alaspäin:
.marquee p transform: translateY (-100%); @keyframes down-one 0% muunnos: translateY (-100%); 10% muunnos: translateY (0); 40% muunnos: translateY (0); 50% muunnos: translateY (100%); 100% muunnos: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% muunnos: translateY (-100%); 60% muunnos: translateY (0); 90% muunnos: translateY (0); 100% muunnos: translateY (100%);
Huomaa, että olemme muuttaneet X-akseli että Y-akseli ja käännä kaikki käännös negatiivinen arvo positiiviseksi ja päinvastoin.
Meillä on myös nimeksi Animaatio että down-onin ja down-kaksi, joten meidän on sovellettava Animation-nimeä uudelleen myös kappaleelementtiin.
.marquee p: nth-child (1) animation: down-one 20s helpottaa ääretöntä; .marquee p: nth-child (2) animation: down-two 20s helpottaa ääretöntä;
Tai jos haluat siirtää sen päinvastoin; alhaalta ylöspäin. Tässä on kaikki sovellettavat koodit:
.marquee.up p transform: translateY (100%); .marquee.up p: n-lapsi (1) animaatio: up-one 20s helpottaa ääretöntä; .marquee.up p: n-lapsi (2) animaatio: up-two 20s helpottaa ääretöntä; @keyframes up-one 0% muunnos: translateY (100%); 10% muunnos: translateY (0); 40% muunnos: translateY (0); 50% muunnos: translateY (-100%); 100% muunnos: translateY (-100%); @keyframes up-two 0% muunnos: translateY (100%); 50% muunnos: translateY (100%); 60% muunnos: translateY (0); 90% muunnos: translateY (0); 100% muunnos: translateY (-100%);
- esittely
- Lataa lähde
johtopäätös
Huolimatta nykyisen selaintuen puutteesta, CSS3-animaatio, mikäli se tehdään oikein, ratkaisee epäilemättä monia käytettävyyskysymyksiä tulevaisuudessa, kuten olemme tehneet tässä esimerkissä. Jos tarvitsemme vain lyhyen animaation, joka on tarkoitettu nykyaikaisille selaimille, CSS3-animaatio on todennäköisesti parempi kuin jQuery-skriptin lataaminen.
Lopuksi tiedämme, että tämä artikkeli saattaa olla hieman ylivoimainen joillekin ihmisille, joten jos sinulla on kysyttävää tästä artikkelista, voit lähettää sen kommenttien osioon alla.
