Nilalaman
- 01. Isang 3D na umiikot na card ng negosyo
- 02. Pagbibigay ng mga alternatibong istilo
- 03. Mga CSS na animasyon at JavaScript
- 04. Buod
- Kailangan ng kaalaman: Katamtamang CSS, pangunahing JavaScript, advanced HTML
- Kinakailangan: Isang disenteng editor ng teksto, isang modernong web browser
- Oras ng Proyekto: Hangga't maaari mong tiisin upang magtrabaho ito
- Suporta ng file
Ang artikulong ito ay unang lumitaw sa isyu ng 232 ng .net magazine.
Dahil mapagbigay ako sa isang kasalanan, sa buwan na ito ay ibabahagi ko sa iyo ang ilang materyal na kinuha mula sa aking libro - Praktikal na CSS3: Bumuo at Disenyo - at, mas partikular, mula sa kabanata ng mga animasyon ng CSS. Ako ay isang malaking tagahanga ng mga paglilipat, pagbabago at animasyon ng CSS, ngunit hanggang ngayon higit sa lahat nakita ko ang mga ito dati upang lumikha ng mga bagay na pang-intro type.
Ang pagiging uri ng praktikal, sinisiyasat ko sila karamihan mula sa higit sa isang real-world na pananaw, iniisip kung paano sila magagamit upang lumikha ng mga magagawang tampok sa mga web page. At syempre, kailangan nating isaalang-alang kung ano ang nangyayari kapag na-access ng mga mas matatandang browser na hindi sinusuportahan ang mga tampok na ito ang iyong mga pahina. Minsan maaari kaming umasa sa kaaya-ayang pagkasira, ngunit kung minsan kailangan nating harapin ang mga nasabing pagkakaiba sa browser sa isang mas matalinong paraan.
Sa layuning ito, sa tutorial na ito ay ipapakita ko sa iyo ang isang kasiya-siyang (at sana ay kapaki-pakinabang) na mga halimbawa na gumagamit ng CSS3 transforms, transitions at animations, at gumagamit ng Modernizr upang maghatid ng mga alternatibong istilo sa mas luma, hindi sumusuporta sa mga browser .
01. Isang 3D na umiikot na card ng negosyo
Upang magsimula, tingnan natin ang isang card ng negosyo na dumapa sa isang 3D transform (na may mga makatotohanang sukat na may sukat na millimeter!). Maaari kang makahanap ng isang natapos na halimbawa sa file dalawang-mukha-pisngi.html.
Ang markup ay medyo simple:
div id = "wrapper" tabindex = "0">
div id = "panloob na balot">
div id = "harap">
/ div>
div id = "pabalik">
/ div>
/ div>
/ div>
Sa kasong ito, ang panloob na balot ay ginagamit para sa sukat at pagpoposisyon, at ang buong gawaing disenyo ay inilapat sa dalawang harap at likod na div para sa harap at likod ng kard. Ang panlabas na pambalot ay naroon upang magdagdag ng pag-hover at iba pang mga epekto ng pagbabago ng estado.
Ang mga nilalaman ng div ay hindi mahalaga para sa mga layunin ng halimbawang ito, bagaman para sa isang tunay na card ng negosyo malamang na nais mong markahan ang mga detalye sa pakikipag-ugnay sa isang mas kapaki-pakinabang na paraan - sa pamamagitan ng paggamit ng isang hCard microformat, halimbawa. Magtatakda muna kami ng isang paglipat sa panloob na balot at pagkatapos ay sabihin ito upang mapanatili ang 3D space:
# panloob na balot {
...
paglipat: 1.5s lahat;
pagbabago ng istilo: mapanatili-3d;
}
Susunod, itakda backface-visibility: nakatago; sa parehong harap at likod na div>:
# harap, # balik {
...
backface-visibility: nakatago;
}
Pagkatapos ay i-set up ang default na estado ng card ng negosyo:
# harap {
ibahin ang anyo: paikutinX (0deg);
z-index: 2;
}
#back {
ibahin ang anyo: paikutinX (180deg);
}
Ang harap ng card ay hindi kailangang paikutin para sa default na estado. Gayunpaman, nag-apply ako ng a paikutinX (0deg); ibahin ang anyo dito sapagkat mukhang malulutas nito ang isang problema sa Firefox kung saan ang ilan sa nilalaman sa harap ng card ay ipinapakita nang pabalik kapag ang card flip ay na-trigger, kahit na may backface-visibility: nakatago; inilapat Weird pero totoo.
Ang likod ng card ay pinaikot sa paligid ng X axis ng 180 degree bilang default, dahil gugustuhin mong maging invisible ito bilang default (backface-visibility: nakatago;) at baligtad. Kailangan din namin z-index sa harap upang ipakita ito sa harap. Bilang default, lilitaw ito sa likod ng likod na mukha dahil ang mukha sa likod ay darating mamaya sa pagkakasunud-sunod ng pinagmulan.
Ang huling hakbang ay paikutin ang buong kard ng negosyo ng 180 degree kapag na-mouse ito / nakatuon:
#wrapper: hover # inner-wrapper, #wrapper: focus # inner-wrapper {
ibahin ang anyo: paikutinX (180deg);
}
Gumagawa ito ng resulta na ipinakita sa dalawang imahe sa kabilang pahina.
Upang ipakita kung bakit backface-visibility: nakatago; ay mahalaga sa mga ganitong sitwasyon, subukang alisin ang linya mula sa code at i-reload. Kung backfacevisibility: nakatago; ay hindi nagtatrabaho, ang epekto ay nasira, na nagreresulta sa nilalaman ng magkabilang panig na nakikita sa lahat ng oras o ibang bagay na hindi inaasahang nangyayari (tingnan ang imahe sa itaas).
02. Pagbibigay ng mga alternatibong istilo
Bilang default, ang halimbawa ng card flip ay nakasalalay sa isang 3D transform upang ang mga nakakita ng panonood ay maaaring makita ang magkabilang panig ng card. Ngunit hindi ito mabuti para sa mga browser na hindi sumusuporta sa mga 3D transform. Upang makapagbigay ng mga kahaliling istilo sa mga mas matandang browser, ilalapat namin ang Modernizr sa aming pahina (tingnan dalawang-mukha-pisngi-modernizr.html sa mga file ng code).
Ang mga hindi sumusuporta sa browser ay makakakuha ng isang klase ng walang-csstransforms3d nakadugtong sa kanilang ulo> mga klase, upang makapagbigay ka ng alternatibong istilo ng nasa ibaba:
.no-csstransforms3d #wrapper: hover #front, .no-csstransforms3d
#wrapper: focus # front {
ibahin ang anyo: paikutin (-30deg) isalin (-50%, - 100%);
paglipat: 0.8s lahat ng kadalian;
}
Ang pumipili ng supling ay naglalapat ng isang 2D na pagbabago sa harap ng mukha ng card lamang kapag ito ay isang inapo ng .no-csstransforms3d (Ang 3D na sumusuporta sa pag-ikot ng mga browser ay hindi papansinin ang estilo na ito). Ang alternatibong istilo na ito ay nagbibigay ng mga hindi sumusuporta sa mga browser na ma-access ang likurang card tulad nito (tingnan sa kanang bahagi sa itaas).
Ngunit paano ang tungkol sa mas matandang mga browser tulad ng IE8 o Camino na hindi susuportahan ang mga rem unit, gradient, pagbabago o anino ng teksto? Hindi makakatulong ang Modernizr sa mga rem unit, kaya ang pinakamahusay na paraan upang makitungo sa kanila ay upang magbigay ng fallback na laki ng pixel bago ang bersyon ng rem unit ng iyong pag-aari sa parehong styleheet, o mas mahusay pa rin sa isang IE-fixes na styleheet na nakatago sa loob isang kondisyunal na komento sa IE.
tuktok ng margin: 5px;
/ * ang fallback * /
tuktok ng margin: 0.5rem;
/* ang orihinal */
Para sa iba pang mga tampok sa CSS, kakailanganin mong isama kahit na ang sumusunod na CSS:
.no-csstransforms #wrapper: hover # front, .no-csstransforms #wrapper: focus
# harap {
kaliwa-kaliwa: -350px;
}
.no-cssgradients #front, .no-cssgradients #back {
background: # FF3500;
}
.no-cssgradients #front p, .no-cssgradients #back p {
/ * perpektong dapat na .no-texthadow, ngunit ito
tila hindi gumana para sa akin * /
kulay: # 000000;
}
Nalalapat ang unang panuntunan isang nai-update : hover /: focus panuntunan sa flip card upang kung hindi suportahan ng browser ang 2D na pagbabago, ang pag-hover o pagtuon ng card ay ilipat ang harap ng 350 pixel upang ibunyag ang likod. Ang pangalawa ay nagbibigay ng isang solidong kulay upang mapalitan ang gradient background sa mga hindi sumusuporta sa mga browser. Kulay ng pangatlong panuntunan sa itim ang teksto, kaya nababasa ito nang walang mga anino.
03. Mga CSS na animasyon at JavaScript
Isa sa mga paraan na nakita ko ang pagiging kapaki-pakinabang ng mga CSS na animasyon ay ang ideklara ang mga ito sa loob ng iyong CSS pagkatapos ay mai-trigger ang mga ito sa pamamagitan ng JavaScript. Upang maipakita ito, lumikha ako ng isang nakawiwiling halimbawa ng form (tingnan animated-form.html at animated-form.css sa mga file ng code). Harapin natin ito, kinamumuhian natin ang mga form ng pag-coding at palaging naghahanap ng mga paraan upang mas magamit ang mga ito at mahusay sa puwang! Ipinapakita rin ng halimbawang ito kung paano gamitin ang Modernizr JavaScript API.
Walang kapansin-pansin sa HTML para sa halimbawang ito. Ang karamihan nito ay isang napaka-simple, form na apat na pag-input na may isang pindutang Isumite. Ngunit kung titingnan mo ang code mapapansin mo na gumagamit ako ng isang katulad na pag-set up sa halimbawa ng card ng negosyo na tinalakay sa itaas. Ang harap na mukha ay may mga elemento ng form dito, samantalang ang nasa likod na mukha ay may mensahe na 'Salamat sa iyong feedback!'
form id = "feedback-form" action = "#">
div id = "harap">
h1> Bigyan kami ng iyong puna! / h1>
div>
label para sa = "pangalan" tabindex = "0">… / label>
uri ng pag-input = "text" name = "name" id = "name">
/ div>
/ div>
div id = "pabalik">
h2> Salamat sa iyong puna! / h2>
/ div>
/ form>
Ang kaibahan ay sa halip na buhayin ito sa pamamagitan ng isang paglipat at ma-trigger ito sa pag-hover / pokus sa pamamagitan ng mga pseudo-class, gumamit ako ng isang CSS na animasyon, tulad nito:
form-rotate ang @keyframes {
mula kay {
ibahin ang anyo: paikutinX (0deg);
}
sa {
ibahin ang anyo: paikutinX (180deg);
}
}
.form-rotate {
animation: form-rotate 1s pasulong;
}
Paikutin ng mga keyframes ng animation ang anupaman na inilalapat ng animation sa paligid ng X axis ng 180 degree, at ang animasyon ay inilalapat sa anumang elemento na binibigyan ng isang klase ng form-rotate. Ito ang magiging form>, at titingnan natin kung paano ito ginagawa sa isang sandali.
Ang iba pang kapansin-pansin na aspeto ay ang h1>, at ang katunayan na ang form ay dumulas sa at labas ng screen kapag ang h1> ay na-click (sa mga browser na sumusuporta sa mga animasyon). Upang ilipat ang h1> sa default na posisyon nito, gagamit kami ng isang pagbabago:
h1 {
posisyon: ganap;
ibahin ang anyo: paikutin (90deg) isalin (9.5rem, -23rem);
}
Upang mai-slide in ang buong form at mag-slide out, dalawang mga animasyon ang na-set up:
form-out ang @keyframes {
mula kay {
ibahin ang anyo: translateX (0rem);
}
sa {
ibahin ang anyo: translateX (38rem);
}
}
.form-out {
animation: form-out na 1s pasulong;
}
form-in na @keyframes {
mula kay {
ibahin ang anyo: translateX (38rem);
}
sa {
ibahin ang anyo: translateX (0rem);
}
}
.form-in {
animasyon: pasulong na form-in 1s;
}
Hindi pa namin nailalapat ang tatlong klase na ipinakita sa itaas sa anumang bagay - gagawin namin ito sa pamamagitan ng ilang simpleng JavaScript kapag na-click ang pindutang Isumite at h1>. Suriin natin nang detalyado ang JavaScript, simula sa tuktok:
var submit = document.getElementById ("isumite");
var form = document.querySelector ("form");
var back = document.getElementById ("back");
var h1 = document.querySelector ("h1");
Dito, ang mga sanggunian sa mga elemento ay nakaimbak sa pahina sa mga sumusunod na variable:
- ipasa: Ang input id = "isumite">
- form: Ang form> elemento
- likod: Ang likod na mukha ng form; ang div> na may katangiang #back
- h1: Ang elemento ng h1>
Susunod, magse-set up kami ng dalawang tagapakinig ng kaganapan:
submit.addEventListener ("click", rotateForm, false);
h1.addEventListener ("click", formOut, false);
Ang unang linya ay nagdaragdag ng isang tagapakinig ng kaganapan sa ipasa variable na sanggunian, na nagpapatupad ng paikutinForm pagpapaandar kapag na-click ang pindutang Isumite. Ang pangalawang linya ay nagdaragdag ng isang tagapakinig ng kaganapan sa h1 variable na sanggunian, na nagpapatupad ng formOut pagpapaandar kapag ang h1> na-click ang elemento.
Mangyaring tandaan na querySelector at addEventListener ay hindi suportado ng mga bersyon ng IE nang mas maaga kaysa sa bersyon 9. Samakatuwid para sa suporta ng IE 6-8, kakailanganin mong isaalang-alang ang paggamit ng iba't ibang code - Iiwan ko ito bilang isang ehersisyo ng mambabasa!
Ngayon, magpatuloy tayo sa unang pagpapaandar:
form formOut () {
kung (form.className === "" || form.className === "form-in") {
kung (Modernizr.cssanimations) {
form.setAttribut ("klase", "form-out");
} iba pa {
form.setAttribut ("klase", "form-fallback");
form.style.left = "0rem";
}
h1.innerHTML = "Itago ang form ng feedback!";
} iba pa {
kung (Modernizr.cssanimations) {
form.setAttribut ("klase", "form-in");
} iba pa {
form.setAttribut ("klase", "");
form.style.left = "-38rem";
}
h1.innerHTML = "Bigyan kami ng iyong puna!";
}
}
Gumamit ako ng isang kung hindi pahayag upang makita kung ang form ay offscreen, at nais kong ilipat ito, o kung ito ay onscreen at nais kong ilipat ito. Mahalaga, form.className === ”” || form.className === "form-in" tinutukoy ‘kung ang klase ng form ay walang laman O itinakda ito sa form-in, pagkatapos ito ay magiging offscreen; samakatuwid, patakbuhin ang unang Modernizr test '. Samantala modernizr.cssanimations sinusubukan kung sinusuportahan ng kasalukuyang browser ang mga animasyon ng CSS. Kung ang mga ito, itinakda namin ang halaga ng klase ng form sa form-out upang ma-trigger ang animasyon na nagdadala nito sa onscreen.
Kung ang pagsubok sa Modernizr ay nagbabalik ng hindi totoo kung gayon hindi gagana ang animation - kaya sa halip ay itinakda namin ang umalis na pagmamay-ari ng form sa 0rem upang maipakita ang form sa screen nang isang beses, at itakda ang klase ng form sa form-fallback, tinitiyak na tatakbo ang pangalawang bahagi ng pag-andar kapag sinubukan ng gumagamit na itago muli ang form (kung pinapabayaan mong gawin ito, ang pangalawang bahagi ng pagpapaandar ay hindi tatakbo sapagkat ang klase ng form ay palaging walang laman). Hindi ito maganda tingnan, ngunit hindi bababa sa ito ay gumagana.
Ang huling bahagi ng seksyon na ito ng code (ang h1.innerHTML bahagi) binabago ang teksto sa loob ng h1> elemento sa isang mensahe na nagsasabi sa mga gumagamit na maitatago nila ito muli kung nais nila.
Kung ang panlabas kung nagbabalik ang pagsubok ng mali, kung gayon ang form ay dapat na onscreen, at ang code sa loob ng iba pa ang block ay naisakatuparan, na nagpapatakbo ng isa pa modernizr.cssanimations pagsusulit. Kung bumalik ito ng totoo, binabago ng code ang halaga ng klase sa form-in upang muling buhayin itong offscreen.
Kung magbabalik ito ng hindi totoo, ang umalis na ang ari-arian ay ibinalik sa kanyang orihinal na halaga - upang ilipat ito sa offscreen muli sa isang hindi gaanong kaakit-akit na paraan - at ang klase ng form ay nakatakda sa blangko muli upang maibalik ito sa kanyang orihinal na estado.
Ang huling bahagi ng iba pang block ay binabago ang h1> text pabalik sa kung ano ito ay orihinal. Ngayon sa ikalawang pag-andar, rotateForm ():
pagpapaandar rotateForm () {
kung (Modernizr.cssanimations && Modernizr.csstransforms3d) {
form.setAttribut ("klase", "form-rotate");
form.style.left = "0rem";
} iba pa {
back.style.zIndex = "5";
}
}
Dito, kung Modernizr.cssanimations at Modernizr.csstransforms3d ay totoo, setAttribut itatakda ang form>Katangian ng klase sa form-rotate. Nalalapat ito ang paikutin animasyon sa form, ginagawa itong paikutin upang ibunyag ang mensahe na 'Salamat'. Ngunit ang pagtatakda ng form>Klase ni sa form-rotate magpapahuli sa klase ng form-out naitakda nang mas maaga, na kung saan ay magiging sanhi ng form upang ilipat muli ang offscreen; samakatuwid, pinilit namin ang form na manatiling onscreen sa pamamagitan ng pagtatakda ng umalis na ari-arian sa 0 na may form.style.left = “0rem”.
Kung ang pagsubok sa Modernizr ay hindi totoo, hindi sinusuportahan ng browser ang mga Animation ng CSS at / o mga 3D transform. Samakatuwid, nais kong maganap ang iba't ibang istilo kapag na-click ang pindutang Isumite.
Upang paganahin ang mga hindi sumusuporta sa mga browser na makita ang mensahe na 'Salamat', ginamit namin back.style.zIndex = "5"; upang itakda ang z-index ng # balik div sa 5, ginagawa itong lumitaw sa itaas ng lahat ng bagay sa pagkakasunud-sunod ng stacking kapag ang pindutang Isumite ay na-click. Maaari mong makita kung paano ang tatlong mga estado na aking ginagalaw sa pagitan ng pagtingin sa mga imahe sa itaas at sa nakaraang pahina.
Sa wakas, ang ilang mga Modernizr CSS fallback ay idinagdag upang paganahin ang mga mas matandang browser na gumawa ng ilang paggamit ng form:
.no-cssgradients # harap, .no-cssgradients #back {
kulay sa background: # 009999;
}
.no-cssanimations form {
kaliwa: 0;
}
.no-csstransforms h1 {
posisyon: static;
}
.no-csstransforms .extended-info {
ipakita: wala;
}
04. Buod
Tiyak na hindi ko inaasahan na kailangan mong malaman ang JavaScript upang magamit lamang ang CSS. Kung hindi mo maintindihan ang JS code, ipasa lamang ito sa iyong kaibig-ibig na developer ng JavaScript at makipagtulungan dito. Marahil ay magagawa niya ito ng mas mahusay na trabahong ito kaysa sa mayroon ako.
Sa anumang kaso, sulit na tuklasin ang mga nasabing diskarte dahil cool na mapanghawakan ang animasyon sa CSS sa halip na isulat ang lahat ng ito sa JavaScript. Kahit na gumamit ka ng jQuery o isang katulad na silid-aklatan, ito ay maraming timbang pa rin upang idagdag sa pahina para lamang sa isang pares ng mga simpleng mga animasyon.
Tuklasin ang 101 mga tutorial sa CSS at Javascript.
