Каскадни стилски листови (ЦСС) су прешли дуг пут од свог настанка. Постоје ствари које су могуће само са ЦСС-ом за које можда не знате, захваљујући континуираној еволуцији и побољшању језика.
Један од најзначајнијих напретка у ЦСС-у је појава и усавршавање ЦСС функција, које су значајно прошириле могућности и моћ стилизовања веб садржаја.
Преглед садржаја
Шта је ефекат писаће машине?
Ефекат писаће машине је техника анимације текста која симулира процес постепеног откривања садржаја, опонашајући чин куцања док се одвија пред очима гледаоца. Овај ефекат подсећа на писаће машине старе школе, ране рачунарске терминале или интерфејсе командне линије (ЦЛИ).
Постепено појављивање текста додаје елемент неизвесности и интриге, подстичући публику да обрати пажњу на поруку која се одвија.
Како функционише функција ЦСС степс().
Функције у ЦСС-у уводе ниво флексибилности који је раније било тешко постићи коришћењем само статичких стилова. Степен() функција је популарна функција која се користи у ЦСС анимацијама. Чини да анимације изгледају као да напредују у различитим, дискретним корацима уместо да се глатко прелазе.
Степс() је функција времена анимације која узима два параметра. Први параметар означава број корака које желите да ваша анимација предузме. Други параметар дефинише понашање сваког корака. Синтакса за функције степс() изгледа овако:
animation-timing-function: steps(n, direction)
У блоку кода изнад, функција степс() има два параметра и то: н и правац. Параметар правца може бити почетак или крај.
Подешавање правца за почетак осигурава да је први корак завршен чим анимација почне. Док, постављање правца до краја ће покренути последњи корак када се анимација заврши. Да бисте илустровали важност функције степс(), погледајте следећи ХТМЛ код:
<div class="container">
<div></div>
</div>
Блок кода изнад дефинише контејнерски див са подређеним див. Ако желите да дечији див клизи по екрану, користите ЦСС анимације попут ове:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Горњи блок кода користи правило @кеифрамес да дефинише анимацију под називом мовебок. Ова анимација се затим примењује на дете див, што доводи до тога да се глатко креће по екрану у бесконачној петљи.
Ако не волите глатку анимацију и желите да постигнете „изменично“ ефекат, можете користити функцију степс() на следећи начин:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Као што можете видети на ГИФ-у испод, укључивање функције степс() са вредношћу параметра од 10 ће анимирати подређени див у корацима уместо глатке анимације. Што је већи број корака, то ће ваша анимација изгледати мање испрекидано.
У горњем примеру је обезбеђен параметар правца. Међутим, ако изоставите смер, претраживач ће користити енд као подразумевану вредност за смер.
Креирање ефекта писаће машине
Сада када разумете како функционише функција степс(), време је да све што сте научили примените у пракси. Направите нову фасциклу и дајте јој одговарајуће име. У ту фасциклу додајте датотеку индек.хтм за означавање и стиле.цсс датотеку за стилизовање.
У датотеци индек.хтм додајте следећи шаблонски код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
Горњи блок кода дефинише ознаке за једноставну ХТМЛ веб локацију. Постоји див контејнер који садржи други див са неким лажним текстом.
Анимирање текста
Отворите датотеку стилес.цсс и подесите ширину див контејнера на ширину његовог садржаја.
.container{
width: fit-content;
}
Затим, користећи правило @кеифрамес, дефинишите анимацију која контролише како анимација напредује током времена. Подесите ширину на „0%“ на 0%. На 100%, подесите ширину на „100%“ овако:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Затим изаберите елемент са текстом имена класе и поставите својство преливања на скривено. Ово ће осигурати да текст остане скривен све док ефекат куцања не почне. Након што то урадите, уверите се да текст остаје на једном реду тако што ћете својство размака поставити на новрап. Дајте класи текста моноспаце фонт и додајте зелену вертикалну ивицу са десне стране текста.
Ова ивица ће дати изглед курсора. Подесите одговарајућу величину фонта и својство анимације на куцање текста. Коначно, додајте функцију степс() функцији времена анимације.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Када покренете код у претраживачу, ово би требало да видите:
Ако желите дужи ефекат куцања, можете подесити трајање анимације и број корака наведених у функцији степс().
Оживљавање курсора
Ефекат писаће машине је скоро готов, мада недостаје једна карактеристика, а то је трепћући курсор. Подсетимо се да је у последњем блоку кода постављена десна ивица на тексту да служи као курсор. Можете додати анимацију овом курсору и помоћу правила @кеифрамес.
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
Након што дефинишете прилагођену анимацију, додајте име анимације својству анимације у класи текста и подесите трајање на 0,6 секунди.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Сада када покренете код, требало би да видите трепћући курсор.
Моћ ЦСС функција
ЦСС функције су револуционисале начин на који се веб сајтови праве, нудећи изванредан комплет алата за вас као програмера. Ове свестране функције омогућавају динамички стил и интеракције које су некада биле резервисане за сложене језике за скриптовање.
Од манипулација бојама до респонзивних изгледа, анимација и креативних трансформација, ЦСС функције су прошириле могућности веб дизајна. Са функцијама као што су цалц() за флексибилне прорачуне, линеар-градиент() за задивљујуће позадине и транслате() за задивљујуће анимације, можете креирати визуелно привлачна и привлачна корисничка искуства.