Није вам потребан ЈаваСцрипт да бисте креирали ефекат класичне писаће машине. Научите како да то урадите само са ЦСС-ом користећи функцију степс().
Каскадни стилски листови (ЦСС) су прешли дуг пут од свог настанка. Постоје ствари које су могуће само са ЦСС-ом за које можда нисте знали, захваљујући континуираној еволуцији и побољшању језика.
Један од најзначајнијих напретка у ЦСС-у је појава и усавршавање ЦСС функција, које су значајно прошириле могућности и моћ стилизовања веб садржаја.
Шта је ефекат писаће машине?
Ефекат писаће машине је техника анимације текста која симулира процес постепеног откривања садржаја, опонашајући чин куцања док се одвија пред очима гледаоца. Овај ефекат подсећа на писаће машине старе школе, ране компјутерске терминале или Интерфејси командне линије (ЦЛИ).
Постепено појављивање текста додаје елемент неизвесности и интриге, подстичући публику да обрати пажњу на поруку која се одвија.
Како функционише функција ЦСС степс().
Функције у ЦСС-у уводе ниво флексибилности који је раније било тешко постићи коришћењем само статичких стилова. Тхе
кораци() функција је популарна функција која се користи у ЦСС анимацијама. Чини да анимације изгледају као да напредују у различитим, дискретним корацима уместо да се глатко прелазе.кораци() је функција времена анимације која узима два параметра. Први параметар означава број корака које желите да ваша анимација предузме. Други параметар дефинише понашање сваког корака. Синтакса за кораци() функције изгледају овако:
animation-timing-function: steps(n, direction)
У блоку кода изнад, тхе кораци() функција има два параметра и то: н и правац. Тхе правац параметар може бити почетак или крај.
Подешавање правац до почетак осигурава да је први корак завршен чим анимација почне. Док, постављање правац до крај покренуће последњи корак када се анимација заврши. Да би се илустровао значај кораци() функцију, погледајте следећи ХТМЛ код:
<divclass="container">
<div>div>
div>
Блок кода изнад дефинише а контејнер див са дететом див. Ако желите да дечији див клизи по екрану, користите ЦСС анимације попут ове:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Горњи блок кода користи Правило @кеифрамес за дефинисање анимације назван мовебок. Ова анимација се затим примењује на дете див, што доводи до тога да се глатко креће по екрану у бесконачној петљи.
преко ГИПХИ
Ако вам се не свиђа глатка анимација и желите да постигнете „ископаван“ ефекат, можете да искористите кораци() функционише овако:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Као што можете видети на ГИФ-у испод, који укључује кораци() функција са вредношћу параметра 10 ће анимирати дете див у корацима уместо глатке анимације. Што је већи број корака, то ће ваша анимација изгледати мање испрекидано.
преко ГИПХИ
У горњем примеру, правац параметар је обезбеђен. Међутим, ако изоставите правац, претраживач ће користити крај као подразумевана вредност за правац.
Креирање ефекта писаће машине
Сада када разумете како кораци() функција функционише, време је да све што сте научили примените у пракси. Направите нову фасциклу и дајте јој одговарајуће име. У том фолдеру додајте ан индек.хтм фајл за означавање и а стиле.цсс фајл за стилизовање.
У индек.хтм датотеку, додајте следећи шаблонски код:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="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: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}
Када покренете код у претраживачу, ово би требало да видите:
преко ГИПХИ
Ако желите дужи ефекат куцања, можете подесити трајање анимације и број корака наведених у кораци() функција.
Оживљавање курсора
Ефекат писаће машине је скоро готов, мада недостаје једна карактеристика, а то је трепћући курсор. Подсетимо се да је у последњем блоку кода постављена десна ивица на тексту да служи као курсор. Можете додати анимацију овом курсору користећи @кеифрамес владати такође.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
Након дефинисања прилагођене анимације, додајте назив анимације у анимација имовине на текст класе и подесите трајање на 0,6 секунди.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Сада када покренете код, требало би да видите трепћући курсор.
преко ГИПХИ
Моћ ЦСС функција
ЦСС функције су револуционисале начин на који се веб сајтови праве, нудећи изванредан комплет алата за вас као програмера. Ове свестране функције омогућавају динамички стил и интеракције које су некада биле резервисане за сложене језике за скриптовање.
Од манипулација бојама до респонзивних изгледа, анимација и креативних трансформација, ЦСС функције су прошириле могућности веб дизајна. Са функцијама као што су цалц() за флексибилне прорачуне, линеар-градиент() за задивљујуће позадине и транслате() за задивљујуће анимације, можете креирати визуелно привлачне и привлачне кориснике искуства.
