Notaðu JavaScript til að hlekkja fjör með CSS

Efni.

• Álagningin
• Stílarnir
• Handritið
• CSS fjör viðburðir
• Leggja saman

Það eru fjögur og hálft ár síðan CSS umskipti voru fyrst kynnt í WebKit og þrjú eru liðin síðan CSS keyframe hreyfimyndir gengu til liðs við þá. Báðir nálgast nú veltipunktinn við innleiðingu vafra - þeir eru studdir í Chrome, Safari og Firefox, sem þýðir að þeir eru nú þegar í boði fyrir um 50 til 60 prósent af netnotendum og verða brátt í Opera 12 og Internet Explorer 10 Þetta þýðir að þeir eru tilbúnir fyrir sviðsljósið.

Notkun CSS hreyfimynda og umbreytinga, héðan í frá þekkt sem CSS fjör, hefur þegar verið fjallað vel (ekki síst í .net), þannig að í þessari kennslu ætla ég að sýna þér hvernig hægt er að hlekkja CSS fjör saman með JavaScript viðburðarhöndlum, sem raunverulega eykur möguleika þeirra. Ég ætla að gera það með því að smíða mjög einfaldan hringekjulaga hluti - sem flettir á milli safns af völdum myndum.

• Þekkingar þörf: Millistig CSS, grunn HTML, millistig JavaScript
• Krefst: jQuery, Modernizr, nútíma vafri
• Verkefnatími: 1-2 klst
• Sæktu heimildaskrár

Leyfðu mér að vera skýr frá upphafi: hringekjan er MacGuffin; það er samsæri tæki; það er það sem ég nota til að sýna þér hvernig á að sameina CSS fjör og JavaScript - en það er ekki tilgangurinn með æfingunni. Það eru eflaust betri leiðir til að byggja hringekju sem gerir þetta, en þessar leiðir munu ekki kenna þér um fjörviðburði.

Engu að síður, ef þú vilt fylgjast með eða skoða lokadæmið eru allar skrárnar í stuðningsskrám.

Álagningin

Kjarnaálagningin sem ég nota er mjög einföld; það er gámaskipting með tveimur img frumefni börnum, hvert með einstökum flokki:

1. div>
2. img src = "kettlingur-1.webp">
3. img src = "kettlingur-2.webp">
4. / div>

Fyrir stjórntækin fyrir neðan hringekjuna nota ég pantaðan lista með fjórum hlutum, sem hver um sig hefur gagnaeiginleika sem gildi er nafn einnar af fjórum myndaskrám sem ég mun nota í dæminu mínu:

1. ol id = "trigger">
2. li data-img = "kettlingur-1"> 1 / li>
3. li data-img = "kettlingur-2"> 2 / li>
4. li data-img = "kettlingur-3"> 3 / li>
5. li data-img = "kettlingur-4"> 4 / li>
6. / ol>

Þú munt taka eftir því að þessi merking er ekki í HTML skránni - ég ætla að bæta henni við handrit seinna til að hjálpa við tignarlegt niðurbrot. Þessar tvær merkingarblokkir innihalda allar upplýsingar sem ég þarf til að búa til handritið mitt, en fyrst ættum við að stíla þær.

Stílarnir

Til að byrja með eru img þættirnir tveir algerlega staðsettir á sama stað inni í foreldri sínu og .img-1 er gefin hærri z-vísitala þannig að hún birtist fyrir framan .img-2:

1. .haldari {stöðu: ættingi; }
2. .haldari img {
3. botn: 0;
4. vinstri: 0;
5. staða: alger;
6. }
7. img.img-1 {z-index: 8; } img.img-2 {z-index: 7; }

Til að gera img þættir virðast staflaðir, .img-2 hefur CSS umbreytingu beitt á það til að minnka það aðeins og færa það aðeins fyrir ofan .img-1. Það hefur einnig umskipti sem eiga við það, sem ég mun útskýra þegar fram líða stundir:

1. img.img-2 {
2. umbreytast: kvarði (0,96) þýða Y (-3,6%);
3. umskipti: allar 500 ms vellíðan;
4. }

Fljótlegt ráð: ekki gleyma að nota öll viðeigandi forskeyti söluaðila á þessum eignum.

Að lokum ætla ég að búa til keyframe fjör sem kallast upp á við sem mun gera .img-2 renna upp aftan frá .img-1, og niður fyrir framan það:

1. @keyframes upp á við {
2. 50% {umbreyting: kvarði (1) þýðir Y (-120%); }
3. til {
4. umbreyta: enginn;
5. z-vísitala: 9;
6. }
7. }

Þú getur séð að frá upphafsstað þess mun það færast upp 120% og aftur niður og hækkar z-vísitöluna í 9 þar sem það gerir það. Þegar við höfum búið til lykilrammana hringjum við í þau .img-2, en aðeins þegar aukaflokks stig 1 er beitt á það:

1. img.img-2.stage-1 {fjör: uppúr 1s áfram; }

Ef þú lítur í dæmið stílblað, netmag.css, munt þú taka eftir fullt af öðrum reglum - en þær eru aðallega til kynningar og eiga ekki beint við þessa kennslu. Svo nú þegar við höfum skrifað álagningu og CSS, skulum við halda áfram og skoða JavaScript.

Handritið

Í skjalinu mínu nota ég þrjár JavaScript skrár:

1. skrift src = "jquery-1.7.2.min.js"> / skrift>
2. skrift src = "modernizr.js"> / skrift>
3. skrift src = "netmag.js"> / skrift>

Fyrsta, jQuery, ætti ég ekki að þurfa að útskýra. Næsta skrá er sérsniðin gerð af Modernizr, sem greinir stuðning við CSS fjör og umbreytingar. Þriðja skráin er þar sem ég er að setja mitt eigið handrit og það er þetta sem ég ætla að tala um.

Fyrsta skrefið er að hefja jQuery með tilbúinn () aðferð og athugaðu hvort vafrinn geti keyrt þetta kynningu með því að nota Modernizr til að prófa stuðning:

1. $ (skjal) .ready (virka () {
2. ef (Modernizr.cssanimations && Modernizr.cs umbreytingar) {
3. // Keyrðu handritið okkar
4. } Annar {
5. // Gerðu eitthvað annað
6. });

Næsta sem ég ætla að gera er að setja upp nokkrar breytur: handhafa er DOM í gámareiningunni okkar, .haldari, meðan stýringar inniheldur alla álagningu fyrir stýringarnar sem ég sýndi fram á fyrr í kennslunni (í hlutanum „Markup“):

1. var holder = $ (’. holder’);
2. var controls = ’ol id =" trigger "> [etc] / ol>’;

Eftir breyturnar mínar held ég áfram að skilgreina þrjár aðgerðir: skiptiStage1, skiptiStage2 og skiptiStage3 - Ég mun koma að hverju þessu fyrir sig. Með allar alþjóðlegu breyturnar mínar og aðgerðir skilgreindar set ég inn stýringar álagning eftir ílátareininguna:

1. holder.after (stjórna);

Og þá er kominn tími til að setja upp fyrsta viðburðarhlustandann minn, sem kallar aðgerðina skiptiStage1 þegar smellt er á eitthvert eftirlitsatriði nema það hafi flokkinn virkur sótt um það:

1. $ ('# Trigger'). Á ('smelltu', 'li: ekki (.active)', swapStage1);

Hér er allt skiptiStage1 virka:

1. virka skiptiStig1 (e) {
2. $ (e.currentTarget) .addClass ('active'). systkini (). removeClass ('active');
3. var img2data = $ (e.currentTarget) .data (’img’);
4. holder.find (’img.img-2’). attr (’src’, img2data + ’.webp’). addClass (’stage-1’);
5. }

Í fyrsta lagi bætir þetta við bekknum virkur að aðeins smellt á lista atriðið, sem kynnir áherslu stíl en mikilvægara kemur í veg fyrir að smellt sé aftur og valdið átökum handrita. Það fær síðan gögn-img eigindagildi frá hlutnum sem smellt var á og breytir href eiginleiki af .img-2 að nota þetta nýja gildi; þetta er það sem breytir myndinni sem notuð er. Að lokum bætir það bekknum við stig-1 til .img-2og þetta er þar sem CSS fjörviðburðir okkar koma við sögu.

CSS fjör viðburðir

Hvenær .img-2 hefur bekkinn stig-1 bætt við byrjar það keyframe fjör sem kallað er upp á við. Þetta munið þið, hækkar frumefnið upp og lækkar það fyrir framan .img-1. Þegar þessu fjöri er lokið hleypur það af stað atburði sem kallaður er fjör endaog í handritinu okkar er viðburðaraðili settur upp til að hlusta á þetta:

1. holder.on (‘animationend’, ‘img.img-2.stage-1’, swapStage2);

Reyndar notar handritið fjögur mismunandi gildi í atburðarhlustandanum, því hingað til hefur aðeins Firefox framkvæmt þetta án forskeytis:

1. holder.on (’animationend MSAnimationend oanimationend webkitAnimationEnd’, ’img.img-2.stage-1’, swapStage2);

Sama hvað þetta gerir er að kalla fallið skiptiStage2 þegar fjör upp á við hefur lokið - svo þú sérð strax að þetta er mjög gagnleg leið til að hlekkja fjör saman.

Í skiptiStage2 handritið skiptir um flokka frumefnanna: .img-1 verður .img-2 og öfugt - og bætir einnig bekknum við stig-2 að nýskilgreindu .img-2. Hér er aðgerðin að fullu:

1. virka skiptiStig2 (e) {
2. var screen1 = holder.find (’img.img-1’);
3. var screen2 = holder.find (’img.img-2’);
4. screen1.attr (‘class’, ‘img-2 stage-2’);
5. screen2.attr (‘class’, ’img-1’);
6. $ (‘# Trigger li.active’). RemoveClass (‘snúa’);
7. }

Slepptu bara síðustu reglu; Ég kem fljótt að því. Það sem við höfum áhuga á er skipti á tímum - það er krafist vegna þess að img þættir hafa skipt um stöðu - og viðbótin við stig-2 til .img-2. Mundu að þegar við settum upp CSS okkar áttum við við umskipti .img-2, og eins .img-1 verður .img-2 þessi umskipti eiga sér stað þegar frumefnið færist í staflaðan stað. Þegar þessu er lokið er annar atburður rekinn - sem við höfum hlustanda til að byrja með:

1. holder.on (‘transitionend’, ‘img.img-2.stage-2’, swapStage3);

Þetta virkar á sama hátt og fjör enda, en við CSS umskipti; svo þegar frumefnið hefur færst aftur í stafla, umbreytingin klárast og atburðurinn er rekinn, kallar á aðgerð skiptiStage3. Aftur geturðu séð hvernig auðvelt er að hleypa saman mismunandi gerðum af CSS fjörum.

The skiptiStage3 virka snyrtilegt: það fjarlægir .img-2 frá DOM og setur það inn á eftir .img-2, endurheimta upprunalegu DOM pöntunina til að forðast átök:

1. virka skiptiStig3 (e) {
2. var screen1 = holder.find (’img.img-1’);
3. var screen2 = holder.find (’img.img-2’);
4. screen2.removeClass (‘stage-2’). aftengja ();
5. skjár1.eftir (skjár2);
6. }

En við erum samt ekki alveg búin. Það er enn einn hlustandinn í hreyfimyndum í handriti okkar:

1. holder.on (‘animationstart’, ‘img.img-2.stage-1’, snúa);

The fjörstart atburður er rekinn, eins og þú getur líklega giskað á, þegar upp á við fjör byrjar frekar en þegar því lýkur. Í handritinu okkar er hlustandinn notaður til að kalla fallið snúa, sem bætir flokki við virka stýringuna sem kemur af stað lykilramma at-rule. Þetta snýst það á meðan aðal hreyfimyndin á sér stað; það er fjarlægt þegar fjörinu lýkur, eins og við sáum áðan í aðgerð skiptiStage2. Þessi snúningsáhrif eru auka snerting og alls ekki krafist, en er góð leið fyrir mig að sýna fram á fjörstart.

Leggja saman

Svo það er það; eins og ég sagði í upphafi, þá er ég viss um að það eru til betri leiðir til að smíða stafla flískar hringekju en þessa. En það er góð aðferð til að sýna fram á CSS fjörviðburði, sem eru mjög gagnlegir til að hlekkja saman strengi aðgerða og hreyfimynda, eins og ég hef gert hér á mjög einfaldan hátt.