Задаволены
- 01. 3D візітная картка, якая верціцца
- 02. Забеспячэнне альтэрнатыўных стыляў
- 03. CSS-анімацыя і JavaScript
- 04. Рэзюмэ
- Неабходныя веды: Прамежкавы CSS, базавы JavaScript, пашыраны HTML
- Патрабуецца: Годны тэкставы рэдактар, сучасны вэб-браўзэр
- Час праекта: Пакуль вы зможаце папрацаваць над гэтым
- Файл падтрымкі
Гэты артыкул упершыню з'явіўся ў нумары 232 часопіса .net.
Паколькі я шчодры, я ў гэтым месяцы падзялюся з вамі матэрыялам, узятым з маёй кнігі "Практычны CSS3: Распрацоўка і дызайн" і, больш канкрэтна, з главы анімацыі CSS. Я прыхільнік CSS-пераходаў, пераўтварэнняў і анімацыі, але да гэтага часу я бачыў, як яны выкарыстоўваліся для стварэння матэрыялаў прапушчанага ўводу.
З'яўляючыся прагматычным тыпам, я даследую іх у асноўным з пункту гледжання рэальнага свету, думаючы пра тое, як іх можна выкарыстоўваць для стварэння карысных функцый на вэб-старонках. І, вядома, нам трэба ўлічваць, што адбываецца, калі старыя браўзэры, якія не падтрымліваюць гэтыя функцыі, атрымліваюць доступ да вашых старонак. Часам мы можам разлічваць на вытанчаную дэградацыю, але часам нам трэба мець справу з такімі адрозненнямі ў браўзэры больш разумным спосабам.
З гэтай мэтай у гэтым уроку я прадстаўлю вам некалькі пацешных (і, спадзяюся, карысных) прыкладаў, якія выкарыстоўваюць пераўтварэнні, пераходы і анімацыю CSS3 і выкарыстоўваюць Modernizr для абслугоўвання альтэрнатыўных стыляў для старых, не падтрымліваемых браўзэраў. .
01. 3D візітная картка, якая верціцца
Для пачатку давайце паглядзім на візітную картку, якая перагортваецца з дапамогай 3D-пераўтварэння (з рэалістычнымі памерамі ў міліметры!). Вы можаце знайсці гатовы прыклад у файле двухлікая шчака.html.
Разметка даволі простая:
div id = "абгортка" tabindex = "0">
div id = "inner-wrapper">
div id = "front">
/ div>
div id = "back">
/ div>
/ div>
/ div>
У гэтым выпадку ўнутраная абгортка выкарыстоўваецца для вызначэння памеру і пазіцыянавання, а ўся дызайнерская праца ўжываецца да двух пярэдніх і задніх элементаў для пярэдняй і задняй часткі карты. Знешняя абгортка div ёсць для дадання навядзення і іншых эфектаў змены стану.
Змест div не мае значэння для мэт гэтага прыкладу, хаця для сапраўднай візітнай карткі вы, напэўна, хочаце пазначыць кантактныя дадзеныя больш карысным спосабам - напрыклад, з выкарыстаннем мікрафармата hCard. Спачатку мы ўсталюем пераход на ўнутранай абгортцы, а потым скажам, каб захаваў прастору 3D:
# унутраная абгортка {
...
пераход: 1,5 с усё;
пераўтварыць стыль: зберагчы-3d;
}
Далей усталюйце бачнасць на баку: схавана; як на пярэднім, так і на заднім div>:
# фронт, # назад {
...
бачнасць на баку: схавана;
}
Затым усталюйце стан візітнай карткі па змаўчанні:
#front {
пераўтварэнне: rotateX (0deg);
z-індэкс: 2;
}
#back {
пераўтварэнне: rotateX (180deg);
}
Пярэднюю частку карткі не трэба паварочваць да стану па змаўчанні. Аднак я ўжыў rotateX (0deg); пераўтварыць у яго, таму што гэта, здаецца, вырашае праблему ў Firefox, калі частка змесціва на пярэдняй панэлі карты адлюстроўваецца ў зваротным парадку, калі спрацоўвае перакульванне карты, нават з бачнасць на баку: схавана; ужываецца. Дзіўна, але праўда.
Тыльны бок карты па змаўчанні паварочваецца вакол восі X на 180 градусаў, таму што вы хочаце, каб яна была нябачнай па змаўчанні (бачнасць на баку: схавана;) і дагары нагамі. Нам таксама трэба z-індэкс спераду, каб ён з'явіўся спераду. Па змаўчанні ён будзе з'яўляцца ззаду, таму што пазней ён з'явіцца ў зыходным парадку.
Апошнім крокам з'яўляецца паварот усёй візітнай карткі на 180 градусаў пры навядзенні / навядзенні мышы:
#wrapper: hover # inner-wrapper, #wrapper: focus # inner-wrapper {
пераўтварэнне: rotateX (180deg);
}
Гэта дае вынік, паказаны на двух выявах на процілеглай старонцы.
Каб прадэманстраваць, чаму бачнасць на баку: схавана; важна ў такіх сітуацыях, паспрабуйце выдаліць радок з кода і перазагрузіць. Калі бачнасць бачнасці: схавана; не выкарыстоўваецца, эфект сапсаваны, у выніку чаго змест абодвух бакоў будзе бачны ўвесь час альбо адбываецца нешта іншае нечаканае (гл. малюнак вышэй).
02. Забеспячэнне альтэрнатыўных стыляў
Па змаўчанні прыклад перагортвання карты абапіраецца на 3D-пераўтварэнне, каб відушчыя гледачы маглі бачыць абодва бакі карты. Але гэта не падыходзіць для браўзэраў, якія не падтрымліваюць 3D-пераўтварэнні. Каб забяспечыць альтэрнатыўныя стылі для старых браўзэраў, мы ўжывём Modernizr да нашай старонкі (гл двухвокая шчока-modernizr.html у файлах кода).
Не падтрымліваючыя браўзэры атрымаюць клас no-csstransforms3d дадаецца да іх кіраўнік> класы, так што вы можаце прапанаваць альтэрнатыўны стыль, як паказана ніжэй:
.no-csstransforms3d # абгортка: навядзіце # front, .no-csstransforms3d
#wrapper: фокус # front {
пераўтварэнне: паварот (-30deg) пераклад (-50%, - 100%);
пераход: 0,8 с, усё лёгка;
}
Селектар нашчадкаў прымяняе 2D-пераўтварэнне да пярэдняй грані карты толькі тады, калі яна з'яўляецца нашчадкам .no-csstransforms3d (3D-паварот, які падтрымлівае браўзэры, ігнаруе гэты стыль). Гэты альтэрнатыўны стыль дае браўзэрам, якія не падтрымліваюць, доступ да адваротнага боку карты, як гэта (гл. Зверху справа).
Але як быць са старымі браўзэрамі, такімі як IE8 або Camino, якія не падтрымліваюць рэма-блокі, градыенты, пераўтварэнні і цень тэксту? Modernizr не дапаможа з блокамі rem, таму лепшы спосаб справіцца з імі - даць рэзервовы варыянт памеру пікселя непасрэдна перад версіяй блока rem вашай уласнасці ў той жа табліцы стыляў, ці яшчэ лепш у табліцы стыляў IE-выпраўленняў, схаванай унутры умоўны каментарый IE.
поле зверху: 5 пікселяў;
/ * запасны варыянт * /
поле зверху: 0,5рэм;
/ * арыгінал * /
Для іншых функцый CSS вам трэба будзе ўключыць як мінімум наступны CSS:
.no-csstransforms #wrapper: hover # front, .no-csstransforms #wrapper: focus
#front {
поле злева: -350px;
}
.no-cssgradients #front, .no-cssgradients #back {
фон: # FF3500;
}
.no-cssgradients #front p, .no-cssgradients #back p {
/ * у ідэале павінна быць .no-texthadow, але гэта
мне, здаецца, не атрымалася * /
колер: # 000000;
}
Першае правіла ўжывае абноўленае : hover /: фокус правіла да фліп-карты, каб, калі браўзэр не падтрымлівае 2D-пераўтварэнні, навядзенне або факусоўка карты перамясціла пярэднюю частку на 350 пікселяў, каб выявіць заднюю. Другі забяспечвае цвёрды колер, які заменіць градыентны фон у не падтрымліваемых браўзэрах. Трэцяе правіла афарбоўвае тэкст у чорны колер, таму яго можна чытаць без ценяў.
03. CSS-анімацыя і JavaScript
Адзін са спосабаў, як я лічу карыснымі анімацыі CSS, - гэта аб'явіць іх у сваім CSS, а потым запусціць праз JavaScript. Каб прадэманстраваць гэта, я стварыў цікавы прыклад формы (гл animated-form.html і animated-form.css у файлах кода). Пагодзімся, мы ненавідзім формы кадавання і заўсёды шукаем спосабы зрабіць іх больш карыснымі і эфектыўнымі ў касмічным плане! Гэты прыклад таксама дэманструе, як выкарыстоўваць API Modernizr JavaScript.
У гэтым прыкладзе ў HTML няма нічога выдатнага. Асноўная частка - вельмі простая форма з чатырма ўводамі з кнопкай "Адправіць". Але калі вы паглядзіце код, вы заўважыце, што я выкарыстоўваю вельмі падобную ўстаноўку да прыкладу візітнай карткі, разгледжанага вышэй. На пярэдняй грані ёсць элементы формы, а на задняй - паведамленне "Дзякуй за водгук!":
form id = "feedback-form" action = "#">
div id = "front">
h1> Дайце нам свой водгук! / h1>
div>
пазнака для = "name" tabindex = "0"> ... / label>
input type = "text" name = "name" id = "name">
/ div>
/ div>
div id = "back">
h2> Дзякуй за водгук! / h2>
/ div>
/ форма>
Розніца ў тым, што замест таго, каб аніміраваць яго з дапамогай пераходу і выклікаць пры навядзенні / фокусе праз псеўда-класы, я выкарыстаў CSS-анімацыю, напрыклад:
@keyframes form-rotate {
ад {
пераўтварэнне: rotateX (0deg);
}
да {
пераўтварэнне: rotateX (180deg);
}
}
.form-rotate {
анімацыя: павярніце форму на 1s наперад;
}
Ключавыя кадры анімацыі паварочваюць усё, да чаго ўжываецца анімацыя, вакол восі X на 180 градусаў, а анімацыя - да любога элемента, якому прысвоены клас форма-паварот. Гэта будзе форма>, і мы разбярэмся, як гэта робіцца праз імгненне.
Іншым важным аспектам з'яўляецца h1>, і той факт, што форма слізгае на экран і выходзіць з яго, калі h1> націскаецца (у аглядальніках, якія падтрымліваюць анімацыю). Для перамяшчэння h1> у зыходнае становішча мы будзем выкарыстоўваць пераўтварэнне:
h1 {
пазіцыя: абсалютная;
пераўтварэнне: паварот (90 градусаў), пераклад (9,5 рэм, -23 рэм);
}
Для таго каб уся форма ссоўвалася і выцягвалася, былі створаны дзве анімацыі:
@keyframes form-out {
ад {
пераўтварэнне: translateX (0rem);
}
да {
пераўтварэнне: translateX (38рэм);
}
}
.form-out {
анімацыя: бланк 1s наперад;
}
рэгістрацыя ў @keyframes {
ад {
пераўтварэнне: translateX (38рэм);
}
да {
пераўтварэнне: translateX (0rem);
}
}
.form-in {
анімацыя: форма ў 1s наперад;
}
Мы яшчэ не прымянілі тры класы, паказаныя вышэй, ні да чаго - мы зробім гэта з дапамогай простага JavaScript, калі націснуць кнопку "Адправіць" і h1>. Давайце падрабязна разбярэм JavaScript, пачынаючы з самага верху:
var submit = document.getElementById ("адправіць");
var form = document.querySelector ("форма");
var back = document.getElementById ("назад");
var h1 = document.querySelector ("h1");
Тут спасылкі на элементы захоўваюцца на старонцы ў наступных зменных:
- прадставіць: Уваходны ідэнтыфікатар = "адправіць">
- форма: Форма> элемент
- назад: Тыльны бок асобы; div> з атрыбутам #back
- h1: Элемент h1>
Далей мы наладзім два слухачы падзей:
submit.addEventListener ("націсніце", rotateForm, ілжыва);
h1.addEventListener ("націсніце", formOut, ілжыва);
Першы радок дадае слухач падзеі ў прадставіць спасылка на зменную, якая выконвае rotateForm функцыя пры націску кнопкі Адправіць. Другі радок дадае слухач падзеі ў h1 спасылка на зменную, якая выконвае formOut функцыя, калі h1> націснуты элемент.
Звярніце ўвагу на гэта querySelector і addEventListener не падтрымліваюцца версіямі IE раней версіі 9. Таму для падтрымкі IE 6-8 вам трэба будзе разгледзець магчымасць выкарыстання іншага кода - я пакіну гэта як практыкаванне для чытання!
Зараз пяройдзем да першай функцыі:
функцыя formOut () {
if (form.className === "" || form.className === "form-in") {
калі (Modernizr.cssanimations) {
form.setAttribute ("клас", "форма-з-пад");
} яшчэ {
form.setAttribute ("клас", "запасны выгляд");
form.style.left = "0rem";
}
h1.innerHTML = "Схаваць форму зваротнай сувязі!";
} яшчэ {
калі (Modernizr.cssanimations) {
form.setAttribute ("клас", "форма-ў");
} яшчэ {
form.setAttribute ("клас", "");
form.style.left = "-38рэм";
}
h1.innerHTML = "Дайце нам свой водгук!";
}
}
Я выкарыстаў калі ... яшчэ заява, каб даведацца, ці ёсць форма па-за экранам, і я хачу перанесці яе, ці яна на экране, і я хачу перанесці яе. Па сутнасці, form.className === "" || form.className === ”форма ўводу” паказвае "калі клас формы пусты АБО ён усталяваны ў форму, то ён будзе па-за экранам; таму запусціце першы тэст Modernizr '. Тым часам modernizr.cssanimations правярае, ці падтрымліваецца анімацыя CSS бягучым браўзерам. Калі яны ёсць, мы ўсталёўваем для класа значэнне формы афармленне каб запусціць анімацыю, якая выводзіць яе на экран.
Калі тэст Modernizr вяртае false, анімацыя не будзе працаваць - таму замест гэтага мы ўсталёўваем злева уласцівасць формы да 0рэм для таго, каб форма адначасова з'явілася на экране і ўстанавіце для класа формы форма-запасны, гарантуючы, што другая частка функцыі будзе працаваць, калі карыстальнік зноў паспрабуе схаваць форму (калі вы грэбуеце гэтым зрабіць, другая частка функцыі ніколі не запусціцца, таму што клас формы заўсёды будзе пустым). Гэта не так добра выглядае, але, па меншай меры, працуе.
Апошняя частка гэтага раздзела кода ( h1.innerHTML частка) змяняе тэкст у h1> элемент паведамлення, які кажа карыстальнікам, што яны могуць яго зноў схаваць, калі захочуць.
Калі знешняя калі test вяртае false, тады форма павінна быць на экране, а код унутры яшчэ выконваецца блок, які запускае іншы modernizr.cssanimations тэст. Калі гэта вяртае true, код змяняе значэнне класа на форма-у каб зноў ажывіць яго за межамі экрана.
Калі ён вяртае false, злева уласцівасць вяртаецца да першапачатковага значэння - каб перанесці яго за межы экрана ў менш гламурнай форме - і клас формы зноў усталяваны ў пусты, каб вярнуць яго ў зыходны стан.
Фінальная частка блока else мяняе h1> тэкст да таго, якім ён быў першапачаткова. Зараз да другой функцыі, rotateForm ():
функцыя rotateForm () {
калі (Modernizr.cssanimations && Modernizr.csstransforms3d) {
form.setAttribute ("клас", "форма-паварот");
form.style.left = "0rem";
} яшчэ {
back.style.zIndex = "5";
}
}
Вось калі Modernizr.cssanimations і Modernizr.csstransforms3d праўда, setAttribute усталюе форма>Атрыбут класа форма-паварот. Гэта датычыцца круціцца анімацыя да формы, прымушаючы яе круціцца, каб паказаць паведамленне "Дзякуй". Але ўстаноўка форма>Клас да форма-паварот заменіць клас афармленне усталяваны раней, што прывядзе да таго, што форма зноў выйдзе за межы экрана; таму мы прымусілі форму заставацца на экране, усталяваўшы злева ўласцівасць да 0 с form.style.left = "0rem".
Калі тэст Modernizr не адпавядае рэчаіснасці, браўзэр не падтрымлівае анімацыю CSS і / або 3D-пераўтварэнні. Такім чынам, я хачу, каб пры націску на кнопку "Адправіць" адбываліся розныя стылі.
Мы дазволілі браўзэрам, якія не падтрымліваюць, бачыць паведамленне "Дзякуй" back.style.zIndex = "5"; усталяваць z-індэкс з # назад div да 5, прымушаючы яго з'яўляцца над усім астатнім у парадку кладкі пры націску кнопкі "Адправіць". На малюнках вышэй і на папярэдняй старонцы вы можаце ўбачыць, як выглядаюць тры стану, якія я анімірую паміж імі.
Нарэшце, дададзены некаторыя рэзервовыя копіі Modernizr CSS, якія дазваляюць старым браўзэрам выкарыстоўваць форму:
.no-cssgradients # front, .no-cssgradients # back {
колер фону: # 009999;
}
.no-cssanimations form {
злева: 0;
}
.no-csstransforms h1 {
становішча: статычнае;
}
.no-csstransforms .extended-info {
дысплей: няма;
}
04. Рэзюмэ
Я, вядома, не чакаю, што вам трэба будзе ведаць JavaScript толькі для таго, каб выкарыстоўваць CSS. Калі вы не разумееце код JS, проста перадайце яго вашаму прыязнаму распрацоўшчыку JavaScript і супрацоўнічайце над ім. Верагодна, ён можа зрабіць гэта значна лепш, чым я.
У любым выпадку, варта вывучыць такія метады, бо крута мець магчымасць апрацоўваць анімацыю з дапамогай CSS, а не пісаць усё гэта ў JavaScript. Нават калі вы выкарыстоўваеце jQuery ці падобную бібліятэку, усё роўна гэта вельмі шмат, каб дадаць на старонку толькі для некалькіх простых анімацый.
Адкрыйце для сябе 101 падручнік па CSS і Javascript.
