Нямате нужда от JavaScript, за да създадете ефекта на класическата пишеща машина. Научете как да го направите само с CSS, като използвате функцията steps().
Каскадните стилови таблици (CSS) изминаха дълъг път от създаването си. Има неща, които са възможни само с CSS, за които може би не знаете, благодарение на непрекъснатото развитие и подобряване на езика.
Един от най-забележителните постижения в CSS е появата и усъвършенстването на CSS функции, които значително разшириха възможностите и силата на стилизирането на уеб съдържание.
Какво представлява ефектът на пишещата машина?
Ефектът на пишещата машина е техника за анимиране на текст, която симулира процеса на постепенно разкриване на съдържание, имитирайки акта на писане, докато се разгръща пред очите на зрителя. Този ефект напомня на пишещи машини от старата школа, ранни компютърни терминали или Интерфейси на командния ред (CLI).
Постепенното появяване на текста добавя елемент на напрежение и интрига, насърчавайки публиката да обърне голямо внимание на разгръщащото се послание.
Как работи функцията CSS steps().
Функциите в CSS въвеждат ниво на гъвкавост, което преди беше предизвикателство да се постигне само с помощта на статични стилове. The стъпки() е популярна функция, която се използва в CSS анимации. Това кара анимациите да изглеждат така, сякаш напредват в различни, дискретни стъпки, вместо плавен преход.
стъпки() е функция за синхронизиране на анимация, която приема два параметъра. Първият параметър обозначава броя на стъпките, които искате да предприеме вашата анимация. Вторият параметър определя поведението на всяка стъпка. Синтаксисът за стъпки() функции изглежда така:
animation-timing-function: steps(n, direction)
В кодовия блок по-горе, стъпки() функцията има два параметъра, а именно: н и посока. The посока параметър може да бъде започнете или край.
Настройка на посока да се започнете гарантира, че първата стъпка е завършена веднага щом започне анимацията. Като има предвид, че настройката на посока да се край ще изпълни последната стъпка, когато анимацията приключи. За да се илюстрира важността на стъпки() функция, разгледайте следния HTML код:
<divclass="container">
<div>div>
div>
Кодовият блок по-горе дефинира a контейнер div с дете div. Ако искате дъщерният div да се плъзга по екрана, използвайте CSS анимации като тази:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
Кодовият блок по-горе използва @keyframes правило за дефиниране на анимация на име движеща се кутия. След това тази анимация се прилага към дъщерния div, което го кара да се движи плавно по екрана в безкраен цикъл.
чрез GIPHY
Ако не харесвате плавната анимация и искате да постигнете "накъсан" ефект, можете да използвате стъпки() функционират така:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}
Както можете да видите в GIF-а по-долу, включващ стъпки() функция със стойност на параметър 10 ще анимира дъщерния div на стъпки вместо плавна анимация. Колкото по-голям е броят на стъпките, толкова по-малко накъсана ще изглежда вашата анимация.
чрез GIPHY
В горния пример, посока е предоставен параметър. Ако обаче пропуснете посока, браузърът ще използва край като стойност по подразбиране за посока.
Създаване на ефекта на пишеща машина
Сега, когато разбирате как стъпки() функция работи, време е да приложите на практика всичко, което сте научили. Създайте нова папка и й дайте подходящо име. В тази папка добавете index.htm файл за маркиране и a style.css файл за стайлинг.
В index.htm файл, добавете следния шаблонен код:
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>Кодовият блок по-горе дефинира маркирането за a прост HTML уебсайт. Има контейнер div, който съдържа друг div с някакъв фиктивен текст.
Анимиране на текста
Отвори styles.css файл и задайте ширината на контейнер div до ширината на съдържанието му.
.container{
width: fit-content;
}
След това, използвайки @ключови рамки правило, дефинирайте анимация, която контролира как анимацията напредва във времето. Задайте ширината на "0%" при 0%. При 100%, задайте ширината на "100%" по следния начин:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
След това изберете елемента с името на класа текст и задайте препълване собственост към скрит. Правейки това, ще сте сигурни, че текстът остава скрит, докато ефектът от въвеждане не е започнал. След като направите това, уверете се, че текстът остава на един ред, като зададете интервал собственост към Nowrap. Дай текст класирайте монопространствен шрифт и добавете зелена вертикална рамка отдясно на текста.
Тази рамка ще изглежда като курсор. Задайте подходящия размер на шрифта и на анимация собственост към тип-текст. Накрая добавете стъпки() функция към функция за време на анимация.
.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);
}
Когато стартирате кода в браузъра, трябва да видите това:
чрез GIPHY
Ако искате по-дълъг ефект при писане, можете да регулирате продължителността на анимацията и броя на стъпките, посочени в стъпки() функция.
Оживяване на курсора
Ефектът на пишещата машина е почти завършен, въпреки че има една липсваща функция, която е мигащият курсор. Спомнете си, че в последния кодов блок беше зададена дясна граница върху текста, която да служи като курсор. Можете да добавите анимация към този курсор, като използвате @ключови рамки правило също.
@keyframes cursor-blink {
0% {
border-color: transparent;
}
100% {
border-color: green;
}
}
След като дефинирате персонализираната анимация, добавете името на анимацията към анимация имот на текст клас и задайте продължителността на 0,6 секунди.
.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}
Сега, когато стартирате кода, трябва да видите мигащ курсор.
чрез GIPHY
Силата на CSS функциите
Функциите на CSS революционизираха начина, по който се създават уебсайтове, предлагайки забележителен набор от инструменти за вас като разработчик. Тези многостранни функции позволяват динамичен стил и взаимодействия, които някога са били запазени за сложни скриптови езици.
От цветови манипулации до адаптивни оформления, анимации и творчески трансформации, CSS функциите разшириха възможностите на уеб дизайна. С функции като calc() за гъвкави изчисления, linear-gradient() за зашеметяващи фонове и translate() за завладяващи анимации, можете да създадете визуално привлекателен и ангажиращ потребител преживявания.
