<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Анимация появления текста на CSS

Анимация появления текста на CSS

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

HTML код

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

<div class="container">
    <div class="text">Приходи в школу</div>
    <div class="text">Учись вождению</div>
    <div class="text">Получай права</div>
    <div class="text">Наслаждайся</div>
</div>


Анимация появления текста на CSS.

CSS код

Для того, чтобы наш контейнер размещался в центре экрана, применим к тегу body флексы и стилизуем сам контейнер.

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25vh;
}

.container {
    text-align: center;
    height: 60px;
    background: yellow;
    border: 3px solid black;
    padding: 0 50px; /* отступы по краям */
}


Анимация появления текста на CSS.

Далее стилизуем блок с текстом.

.text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    line-height: 60px; /* равен высоте контейнера */
    text-transform: uppercase;
}


Анимация появления текста на CSS.

Мы хотим, чтобы в желтом контейнере поочередно происходила смена блока с текстом, а все что находится за пределами контейнера надо скрыть. Для этого добавим к контейнеру одно важное свойство, overflow: hidden.

.container {
    ...
    overflow: hidden;
}

Теперь остался видимым только первый блок с текстом.


Анимация появления текста на CSS.

CSS Анимация

Создадим 7 кадров keyframes от 0% до 100% с примерным шагом 16%. Такое число мы получим в результате деления 100/6. Откуда взялись эти 7 кадров? У нас есть четыре тестовых строки, которые нужно прогнать туда и обратно. Поскольку первая строка появится в первом кадре по умолчанию, то общее количество кадров вычисляем формуле 8-1=7. При движении наверх, мы будем наращивать значение margin-top на 60 пикселей, а при движении вниз уменьшать на 60 пикселей.

@keyframes slide {
    0% {
        margin-top: 0;
    }
    16% {
        margin-top: -60px;
    }
    33% {
        margin-top: -120px;
    }
    50% {
        margin-top: -180px;
    }
    66% {
        margin-top: -120px;
    }
    82% {
        margin-top: -60px;
    }
    100% {
        margin-top: 0;
    }
}

Дадим произвольное название анимации slide, укажем время продолжительности анимации и установим бесконечность infinite. Применим анимацию к первому блоку с текстом, который потащит за собой остальные три блока. Когда первый блок уйдет наверх за пределы желтого контейнера, то она спрячется, благодаря свойству overflow: hidden. На место первой строки встанет другая и так далее по кругу.

.text:first-child {
    animation: slide 12s infinite;
}

Посмотрите пример на CodePen

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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