<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Анимация набора текста на CSS

Анимация набора текста на CSS

На этом уроке разберем как можно имитировать ввод текста с клавиатуры с помощью CSS анимации. Эффект печатающегося текста способен оживить вашу веб-страницу, не прилагая особых усилий. Анимация будет запускаться один раз при при загрузке страницы и этого вполне достаточно.

HTML разметка

Создадим разметку из контейнера для текста с классом wrapper и из блока самого текста с классом text.

<div class="wrapper">
    <div class="text">Анимация набора текста на CSS</div>
</div>

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; /* рисуем курсор */
}


Анимация набора текста на CSS.

Создание анимации для курсора

Объявим анимацию через правило @keyframes и создадим три ключевых кадра анимации: первый кадр (0%) - курсор белого цвета, второй кадр (50%) - курсор прозрачного цвета, третий кадр (100%) - курсор белого цвета. В итоге мы получим мигающий курсор.

@keyframes cursor {
    0%{
        border-color: white;
    }

    50%{
        border-color: transparent;
    }

    100%{
        border-color: white;
    }
}

Применим анимацию с названием cursor к тексту. Для этого добавим к стилям новую строку, где cursor (имя анимации), 0.75s (время длительности анимации), step-end (названии функции способа анимации) и infinite (бесконечная анимация).

.text {
    ...
    animation: cursor 0.75s step-end infinite;
}

Создание анимации набора текста

Суть анимации текста состоит в изменении ширины текста от нуля символов до количества символов включая пробелы, самого текста. Напишем новой правило @keyframes, состоящее из одного кадра.

@keyframes printed_text {
    from{
        width: 0;
    }
}

Наш текст состоит из 29 символов. Добавим новой свойство в стили с классом text.

.text {
    ...
    width: 29ch;
}

А еще добавим через запятую новую анимацию 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);
}


Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.