Procedure
We will first write HTML, CSS and Javascript step by step.
Basic HTML
Create a span tag that will contain the cursor. Give the span an id of cursor for referencing it in CSS and Javascript.
CSS
Increase font size to make cursor more visible.
Javascript
setInterval(function, time) method executes function repetitively after given time in milliseconds.
document.getElementById('cursor').style.opacity = 0 this line is used to change Opacity CSS property using Javascript and DOM.
Conclusion
Very basic example of HTML, CSS, Javascript. It can be done using jquey very easily as well.
Мигающий курсор
Как сделать постоянно мигающий курсор в поле ввода <input type=’text’> ?
Т.е. не зависимо от того, есть ли фокус в данном поле ввода.
При фокусе в поле ввода там появляется стандартное мигание курсора, но нужно чтобы и без фокуса было мигание
Ответы (3 шт):
Анимацию можно отключить по step-end . + нужно убирать свой курсор на фокусе, чтобы не пересекался с системным курсором. и еще нужно совсем его удалять на заполненном инпуте.
если нужно чтобы пользователь что-то ввел сразу, то можно попробовать <input type= ‘text’ autofocus>
Upd:
For better usability, avoid using autofocus. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.
Анимация набора текста на CSS
На этом уроке разберем как можно имитировать ввод текста с клавиатуры с помощью CSS анимации. Эффект печатающегося текста способен оживить вашу веб-страницу, не прилагая особых усилий. Анимация будет запускаться один раз при при загрузке страницы и этого вполне достаточно.
HTML разметка
Создадим разметку из контейнера для текста с классом wrapper и из блока самого текста с классом text.
CSS стили
Выравниваем наш текст по центру и делаем отступ сверху.
.wrapper <
display: flex;
justify-content: center;
margin-top: 30px;
>
Теперь стилизуем сам печатающийся текст. В конце строки для реалистичности поставим курсор. Изобразить курсор можно с помощью рамки. Отобразим только правую сторону рамки border-right. Использование моношириного шрифта не преподнесет никаких сюрпризов, поскольку у данного шрифта одинаковая ширина маленьких и заглавных букв.
.text <
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на новую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
>
Создание анимации для курсора
Объявим анимацию через правило @keyframes и создадим три ключевых кадра анимации: первый кадр (0%) — курсор белого цвета, второй кадр (50%) — курсор прозрачного цвета, третий кадр (100%) — курсор белого цвета. В итоге мы получим мигающий курсор.
@keyframes cursor <
0% <
border-color: white;
>
50% <
border-color: transparent;
>
Применим анимацию с названием cursor к тексту. Для этого добавим к стилям новую строку, где cursor (имя анимации), 0.75s (время длительности анимации), step-end (названии функции способа анимации) и infinite (бесконечная анимация).
.text <
.
animation: cursor 0.75s step-end infinite;
>
Создание анимации набора текста
Суть анимации текста состоит в изменении ширины текста от нуля символов до количества символов включая пробелы, самого текста. Напишем новой правило @keyframes, состоящее из одного кадра.
@keyframes printed_text <
from <
width: 0;
>
>
Наш текст состоит из 29 символов. Добавим новой свойство в стили с классом text.
А еще добавим через запятую новую анимацию printed_text, указав в параметрах функции steps количество символов у текста.
.text <
.
animation: cursor 0.75s step-end infinite,
printed_text 5s steps(29);
>
Код класса text целиком.
.text <
width: 29ch;
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на другую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
animation: cursor 0.75s step-end infinite,
printed_text 5s steps(29);
>
Мигающий курсор
Как сделать постоянно мигающий курсор в поле ввода <input type=’text’> ?
Т.е. не зависимо от того, есть ли фокус в данном поле ввода.
При фокусе в поле ввода там появляется стандартное мигание курсора, но нужно чтобы и без фокуса было мигание
Анимацию можно отключить по step-end . + нужно убирать свой курсор на фокусе, чтобы не пересекался с системным курсором. и еще нужно совсем его удалять на заполненном инпуте.
если нужно чтобы пользователь что-то ввел сразу, то можно попробовать <input type= ‘text’ autofocus>
Upd:
For better usability, avoid using autofocus. Automatically focusing on a form control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.