Улепшајте своју веб локацију користећи ове савете и трикове за анимацију.
Анимације и прелази су важан део веб дизајна. Додавање суптилних анимација вашој веб страници учиниће је привлачнијом. Једноставне анимације попут анимираних икона, кинетичке типографије и анимираних логотипа могу помоћи у побољшању корисничког искуства. Научите пет сјајних трикова са анимацијом који вам могу помоћи да оживите своју веб локацију.
1. Трансформисање елемента при лебдењу
Једна уобичајена пракса дизајна је да имате елемент који се повећава када је у интеракцији. На пример, можда ћете желети да преведете дугмад мало нагоре када неко пређе мишем на њих. То можете постићи користећи ЦСС преобразити имовина.
Под претпоставком да имате дугме:
<дугме>
Кликни ме
дугме>
Стилизирали сте тело документа као и дугме:
/* Поравнава дугме са средиштем странице */
тело {
приказ: флек;
висина: 100вх;
алигн-итемс: центар;
оправдати-садржај: центар;
боја позадине: црн;
}/* Стилизира дугме */
: 0;
дугме {
паддинг: 1ем 2ем;
позадини: Плави;
граница
боја: бео;
граница-радијус: 0.25рем;
курсор: показивач;
фонт-сизе: 2рем;
прелаз: преобразити 500Госпођа;
}
/* Стање лебдења */
дугме:лебдети,
дугме:фоцус {
преобразити: транслатеИ(0.75рем) 500Госпођа;
}
Са последњим блоком, постављате стања лебдења и фокуса на дугме. У оба стања, пребацујете дугме дуж И-осе за 0,75 рем. Дугме би изгледало овако:
Када поставите показивач миша на дугме, оно се помера у правцу нагоре. Прелаз траје пола секунде (500 мс) да се заврши. Ово је образац који можете применити не само на дугмад, већ и на друге елементе (нпр. слике).
2. Декларисање више кључних кадрова са једном декларацијом
Још један уобичајени образац у ЦСС анимацијама је понављање исте вредности више пута. Ово може бити одређена боја, величина или оријентација. Ово можете постићи користећи ЦСС анимације кључних кадрова декларисањем више кључних кадрова једном декларацијом.
Размотрите дугме које сте креирали у претходном одељку. Можда желите да поновите неколико боја позадине када кликнете на дугме. Али такође желите да пређете преко исте боје у различитим фазама анимације. Хајде да видимо како то постићи у коду.
Прво, желите да анимирате дугме само када се кликне. Дакле, креирали бисте а сцрипт.јс датотеку, унутар које приступате дугмету и пребацујете класу на дугме када се на њега кликне:
конст дугме = документ.куериСелецтор("дугме")
буттон.аддЕвентЛистенер("кликни", (е) => {
буттон.цлассЛист.тоггле('журка')
})
Користили смо куериСелецтор за приступ дугмету са веб странице. Да бисте сазнали више о ДОМ обиласку, прочитајте наш пост на како прећи ДОМ користећи ЈаваСцрипт.
Тхе парти-тиме класа активира анимацију под називом журка:
.парти-тиме {
анимација: журка 2000Госпођабесконачан;
}
За анимацију, желите да почнете са црвеном и пређете на жуту на 25%. Онда бисте се вратили на црвену на 50% пре него што бисте се вратили на жуту на 75%. Коначно, на 100%, задовољили бисте се тамноплавом бојом:
@кеифрамес журка {
0%, 50% {
боја позадине: црвена;
}
25%, 75% {
боја позадине: жута;
}
100% {
боја позадине: хсл(200, 72%, 35%);
}
}
Овај приступ је прилично користан за наизменично смењивање боја на позадини заснованој на бојама. Пошто можете да поновите више кључних кадрова у једној променљивој, постаје супер лако користити исто својство у различитим фазама ваше анимације.
3. Коришћење @проперти за анимирање прилагођених својстава
Као што можда већ знате, нису сва својства у ЦСС-у анимирана. Званични Мозилла документација чува ажурирану евиденцију о свим анимираним ЦСС својствима. Ако желите да анимирате својство које није анимирано, онда би ваше најбоље решење било да користите @имовина директива.
Почните тако што ћете променити боју позадине вашег дугмета у линеарни градијент:
дугме {
// другоЦСС
позадини: линеарно-градијент(90дег, Плави, зелен);
// другоЦСС
}
Ево излаза:
Често бисте желели да анимирате градијент боје на дугмету. Иако постоје трикови које можете користити за померање градијента, не можете га заправо анимирати. То је зато позадини (добро као позадинска слика) није својство које се може анимирати. Ово је место где @имовина долази у.
Тхе @имовина директива вам омогућава да региструјете прилагођена својства. Када користите @имовина, морате му дати три вредности, наиме синтаксе, наслеђује, и Почетна вредност:
@имовина --боја-1 {
синтаксе: "<боја>";
наслеђује: истина;
Почетна вредност: црвена;
}
@имовина --боја-2 {
синтаксе: "<боја>";
наслеђује: истина;
Почетна вредност: Плави;
}
Прво је почетно својство, док је друго својство одредишта. Сада, уместо транзиције позадинске слике (коју не можете да пређете), прешли бисте са --цолор-1 до --цолор-2 (ваша прилагођена својства) у једној секунди:
дугме {
прелаз: --цолор-1 1000Госпођа, --цолор-2 1000Госпођа;
}
Ова техника је корисна јер можете додати и друга прилагођавања. На пример, додате одлагање да бисте му пружили лакше искуство. Могућности су бесконачне.
4. Коришћење кашњења негативне анимације
Кашњења анимације су кључна за креирање глатких анимација. Хајде да видимо пример тога на делу. У овом делу додајте а див елемент са 15 тачака на врху дугмета:
<дивкласа="тачке">
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
<дивкласа="тачка">див>
див>
Ево неких основних стилова за трансформацију сваког детета див у тачку:
.дотс {
приказ: флек;
јаз: .5рем;
маргина-дно: 20пк;
}
.дот {
ширина: 10пк;
Аспецт-ратио: 1;
боја позадине: црвена;
граница-радијус: 50%;
}
Овде користимо Флекбок за постављање тачака у хоризонталну линију. Да бисте дубоко заронили у Флекбок, можете проверити наше ЦСС Флекбок водич.
У сцрипт.јс, додајте код који покреће анимацију тачака. Пребацујете плесати час на тачке:
буттон.аддЕвентЛистенер("кликни", (е) => {
буттон.цлассЛист.тоггле('журка')
// Нови код
дотс.форЕацх((тачка) => {
дот.цлассЛист.тоггле('плес')
})
})
Час плеса активира анимацију под називом устати:
.дот.данце {
анимација: устати 2000Госпођабесконачаннаизменично;
}Што се тиче анимације, једноставно преведите тачке -100пк дуж И-осе:
@кеифрамес порасти {
100% {
преобразити: транслатеИ(-100пк)
}
}Сада је време да урадимо нешто занимљиво. Уместо да се тачке истовремено подижу, желите да анимирате тачке да теку попут таласа. Да бисте то постигли, морате додати анимација-кашњење на тачке и повећајте сваку тачку за 100 мс:
.дот:нтх-цхилд (1) {
анимација-кашњење: 100Госпођа;
}
.дот:нтх-цхилд (2) {
анимација-кашњење: 200Госпођа;
}
.дот:нтх-цхилд (3) {
анимација-кашњење: 300Госпођа;
}
.дот:нтх-цхилд (4) {
анимација-кашњење: 400Госпођа;
}
/* Наставите да радите док не дођете до 15. тачке */
Ово ствара елегантну анимацију где се тачке крећу горе-доле у таласастом облику. Следећа слика приказује тачке у средини анимације:
Имајте на уму да ово може бити проблематично, што нас доводи до петог савета.
5. Користите преферс-редуцед-мотион да бисте омогућили подешавања
Увек имајте на уму да многи људи не воле анимације засноване на покрету. У ствари, већина корисника има преференце у претраживачу које могу искључити кретање. Покрет може омести чула, ау тешким случајевима довести до мучнине.
На срећу, можете лако да се побринете за ово тако што ћете своју анимацију умотати у а свеједно медијски упит овако:
@медиа(преферс-редуцед-мотион: но-преференце) {
.дот.данце {
анимација: устати 2000Госпођабесконачаннаизменично;
}
}Сада ако бисте омогућили преферира-смањени-покрет у вашем претраживачу, онда се анимација не би покренула.
Сазнајте више ЦСС савета и трикова
ЦСС је пун сјајних хакова који превазилазе анимације и прелазе. На пример, постоје савети и трикови како да цео ваш изглед буде елегантан и прилагодљив. Праксе вам могу помоћи да своју веб локацију учините привлачнијом, приступачнијом и пријатнијом за прегледање. Ако желите да будете један проценат најбољих ЦСС програмера, онда вам много помаже да имате неколико трикова у рукаву.