Креирање напредног Маркуее са ЦСС3 Анимацијом
Данас ћемо погледати “маркуее” поново. Ми смо заправо о томе разговарали у претходном посту који је говорио о коришћењу -вебкит-маркуее овог пута, ми ћемо овај пут мало даље.
У овом посту ћемо креирати а маркуее-лике ефекат помоћу ЦСС3 Анимације. На тај начин ћемо моћи да додамо још функционалности које се не могу постићи само са -вебкит-маркуее.
Осим ако сте већ упознати са ЦСС3 модулом за анимацију, препоручујемо да погледате следеће референце пре него што наставите са овом документацијом:
- ЦСС3 Аниматионс - В3Сцхоол
- ЦСС Аниматионс - Мозилла Дев. Мрежа
Такође имајте на уму да ЦСС3 Анимација тренутно може да ради само у Фирефок 8+, Цхроме 12+ и Сафари 5.0+ са префиксном верзијом (-моз- и -вебкит-). Међутим, званичну верзију В3Ц-а ћемо користити само без префикса да бисмо избегли оверстуффинг овог чланка са сувишним кодовима.
Аддрессинг Маркуее Иссуе
Један од проблема са натписом је да се текст стално креће. Ово понашање омета читање, а текст је такође тешко читати. Овај пут ћемо покушати да направимо сопствену верзију маркуее-а и учинимо га кориснијом за корисника. На пример; уместо да се текст креће непрекидно, зауставићемо га када буде потпуно видљив, тако да корисник може прочитати текст на тренутак.
Сторибоард (врста)
Свака креативна и дизајнерска креација, као што је лого, илустрација или веб страница, обично почиње скицом. У области продукције анимације ово се ради помоћу плоче сценарија. Пре него што почнемо са било којим кодирањем, прво ћемо креирати а врста сторибоарда, да нам помогну да визуализујемо нашу анимацију.
Као што можете да видите из горње плоче сценарија, планирамо да прикажемо само два реда текста, који ће се оба кретати секвенцијално десно на лево.
Наша плоча сценарија није толико компликована као плоча сценарија за прави анимирани филм, али поента је: сада можемо да замислимо како ће изгледати наш оквир.
ХТМЛ ознака
Пошто ће наша анимација бити једноставна, ХТМЛ ознака ће бити једноставна као:
Како додати ВордПресс Релатед Постс без додатака
Аутоматизујте ваше Дропбок датотеке са радњама
Основни стилови
Пре него што почнемо да радимо око анимације, додајмо неколико основних стилова. Почнимо додавањем текстуре позадине за хтмл елемент.
хтмл бацкгроунд: урл ('… /имагес/скевед_принт.пнг'); Затим ћемо поставити оквир у средиште прозора прегледача као и додати неке детаље као што су унутрашња сенка, боја позадине и обруби.
.маркуее видтх: 500пк; хеигхт: 50пк; маргин: 25пк ауто; оверфлов: хидден; позиција: релативна; бордер: 1пк солид # 000; маргин: 25пк ауто; бацкгроунд-цолор: # 222; -вебкит-бордер-радиус: 5пк; бордер-радиус: 5пк; -вебкит-бок-схадов: инсет 0пк 2пк 2пк ргба (0, 0, 0, .5), 0пк 1пк 0пк ргба (250, 250, 250, .2); бок-схадов: инсет 0пк 2пк 2пк ргба (0, 0, 0, .5), 0пк 1пк 0пк ргба (250, 250, 250, .2);
Затим ћемо позиционирати текст - који је у овом случају замотан у ознаку параграфа - апсолутно, и од апсолутно позиција ће узроковати колапс елемента, ми ћемо морати да дефинишемо елемент ширине 100% да покрије ширину родитеља.
.маркуее п позиција: апсолутна; породица фонтова: Тахома, Ариал, санс-сериф; ширина: 100%; висина: 100%; маргин: 0; лине-хеигхт: 50пк; тект-алигн: центар; цолор: #ффф; текст-сенка: 1пк 1пк 0пк # 000000; филтер: дропсхадов (боја = # 000000, оффк = 1, оффи = 1);
Хајде да мало погледамо резултат.
У овом тренутку, урадили смо са свим основним стиловима који су нам потребни; слободни сте да додате више или персонализоване стилове. Али, предлажемо да се придржавате наше одређене димензије (висина и ширина) до краја туторијала.
Тхе Аниматион
Укратко, анимација је приказ покретних објеката. Сваки покрет је дефинисан у временском оквиру. Дакле, када радимо на анимацији, углавном се бавимо време. Ми узимамо у обзир ствари као што су:
- Када се објекат креће?
- Колико дуго је потребно да се објекат помери из једне тачке у другу?
- Када и колико дуго би објекат требао остати у датом тренутку?
У ЦСС3 Анимација, време може се дефинисати са @кеифраме синтакса. Али, пре скакања у овај одељак, прво одредимо почетну позицију текста.
Планирали смо да текст почиње са десне стране, а затим да се помери на десно. Дакле, овде ћемо га прво позиционирати на десно коришћењем ЦСС3 Трансформатион својства.
.маркуее п трансформ: транслатеКс (100%);
Запамтите 100% које смо дефинисали за наш параграф елемент је био једнак његовом родитељу видтх. Дакле, исто ће се примијенити и овдје; елемент параграфа ће бити преведено на десно за 100% који је у овом примеру једнак 500пк.
Кључни оквири
Тхе @кеифраме синтакса може бити помало збуњујућа за неке људе, тако да смо овде направили једноставан визуелни водич који ће вам помоћи да лако разумете шта се дешава у @кеифраме синтакса.
Кликните овде да видите већу верзију.
Цела анимација ће трајати 20 секунди и подељен је у две секвенце које трају 10 секунди сваки.
У првом низу, први текст ће се одмах помјерити са десне стране и остати видљив на тренутак како би корисник прочитао текст, док ће други текст остати скривен. У другом редоследу, први текст оквира ће се померити улево, а други текст ће се одмах померити са десне стране.
И овде су сви кључни кодови које требамо примијенити за покретање анимације.
@кеифрамес лефт-оне 0% трансформ: транслатеКс (100%); 10% трансформ: транслатеКс (0); 40% трансформ: транслатеКс (0); 50% трансформ: транслатеКс (-100%); 100% трансформ: транслатеКс (-100%); @кеифрамес лева-две 0% трансформ: транслатеКс (100%); 50% трансформ: транслатеКс (100%); 60% трансформ: транслатеКс (0); 90% трансформ: транслатеКс (0); 100% трансформ: транслатеКс (-100%);
Тхе лефт-оне Кључни оквири ће дефинисати прву секвенцу анимације, док ће лева-два Кључни оквири ће дефинисати другу секвенцу.
Примена анимације на елементе
Да би анимација радила, не заборавите да примените анимацију на елемент. Прва секвенца се примењује за први текст или у овом случају први пасус, а друга секвенца се примењује и за други параграф.
.маркуее п: нтх-цхилд (1) аниматион: лијева-једна 20-их година је бесконачна; .маркуее п: нтх-цхилд (2) аниматион: лево-два-20с беспроводно;
Сви смо завршили са нашом анимацијом; да видимо резултате на претраживачу.
- Демо
- Довнлоад Соурце
Бонус
Такође можемо да дефинишемо текст слова да га померимо од врха до дна или обрнуто, као што смо то учинили у претходном посту. Ево како то урадити; замените наше горње шифре анимације са овом испод померање текста надоле:
.маркуее п трансформ: транслатеИ (-100%); @кеифрамес довн-оне 0% трансформ: транслатеИ (-100%); 10% трансформ: транслатеИ (0); 40% трансформ: транслатеИ (0); 50% трансформ: транслатеИ (100%); 100% трансформ: транслатеИ (100%); @кеифрамес довн-тво 0% трансформ: транслатеИ (-100%); 50% трансформ: транслатеИ (-100%); 60% трансформ: транслатеИ (0); 90% трансформ: транслатеИ (0); 100% трансформ: транслатеИ (100%);
Приметите да смо променили Кс-оса до И-оса и окрени све превод негативна вриједност на позитивну и обратно.
Такође имамо преименован у Аниматион до довн-оне и доле-два, тако да морамо поново да применимо име анимације у елементу пасуса.
.маркуее п: нтх-цхилд (1) аниматион: довн-оне 20с лаган бескрајан; .маркуее п: нтх-цхилд (2) аниматион: довн-тво 20с еаси бесконачност;
Иначе, ако желите да га померите супротно; од дна до врха. Ево свих кодова које морате применити:
.маркуее.уп п трансформ: транслатеИ (100%); .маркуее.уп п: нтх-цхилд (1) аниматион: уп-оне 20с беспроводно; .маркуее.уп п: нтх-цхилд (2) аниматион: уп-тво 20с еаси инфините; @кеифрамес уп-оне 0% трансформ: транслатеИ (100%); 10% трансформ: транслатеИ (0); 40% трансформ: транслатеИ (0); 50% трансформ: транслатеИ (-100%); 100% трансформ: транслатеИ (-100%); @кеифрамес уп-тво 0% трансформ: транслатеИ (100%); 50% трансформ: транслатеИ (100%); 60% трансформ: транслатеИ (0); 90% трансформ: транслатеИ (0); 100% трансформ: транслатеИ (-100%);
- Демо
- Довнлоад Соурце
Закључак
Упркос недостатку тренутне подршке за претраживаче, ЦСС3 Анимација, ако се уради правилно, несумњиво ће у будућности решити многе проблеме употребљивости, као што смо то учинили у овом примјеру. Ако нам је потребна само кратка анимација намењена модерним претраживачима, коришћење ЦСС3 анимације је вероватно боље него да се учитава јКуери скрипта.
Коначно, свјесни смо да овај чланак може бити помало неодољив за неке људе, тако да ако имате било каквих питања у вези овог чланка, слободно га поставите у одјељак коментара.
