<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, Вы будете получать уведомления о новых статьях.

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

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

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

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

Анимированный текст по кругу на JavaScript

Анимированный текст по кругу на JavaScript

Вращающийся текст вокруг логотипа всегда привлекает внимание пользователя и вносит легкую динамику на страничку сайта.

HTML разметка и текст в центре

HTML-разметка состоит из круга, логотипа дизайнера и текста.

<div class="circle">
    <div class="logo"></div>
    <div class="text">
        <p>Kristen Johnson - Creative UX/UI Designer - </p>
    </div>
    </div>

*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;/*ширина элемента включает рамки и отступы*/
    font-family: consolas;/*название шрифта*/
}
body {
    display: flex;/*гибкий контейнер*/
    justify-content: center;/*выравнивание по горизонтали*/
    align-items: center;/*выравнивание по вертикали*/
    min-height: 100vh;/*на весь экран*/
}


Анимированный текст по кругу на JavaScript.

Рисуем круг

Фигура круга создана, как каркас для кругового текста. Поэтому для наглядности, временно сделаем круг серым.

.circle {
    position: relative;/*относительное позиционирование*/
    width: 200px;/*ширина круга*/
    height: 200px;/*высота круга*/
    border-radius: 50%;/*скругление углов*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ccc;/*цвет круга*/
}


Анимированный текст по кругу на JavaScript.

Логотип

Внутри круга вставим логотип.

.logo{
    position: absolute;/*абсолютное позиционирование*/
    width: 150px;
    height: 150px;     background: url(img.jpg);/*изображение*/
    background-size: cover;/*картинка пропорционально растянута на весь блок*/
    border-radius: 50%;
}


Анимированный текст по кругу на JavaScript.

Далее убираем из CSS свойство background: #ccc. Больше в этом нет необходимости.

Подготовка текста

Переносим текст поверх логотипа и добавляем ему анимацию.

.text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: animate 10s linear infinite;/*свойства анимации*/
}


Анимированный текст по кругу на JavaScript.

Разобьем наш текст на отдельные символы, используя Javascript.

<script>
    const text = document.querySelector(".text p");
    text.innerHTML = text.innerText.split("")
</script>


Анимированный текст по кругу на JavaScript.

Визуально объединим разбитый текст и зададим для каждого его символа градус поворота со значением 8.2.

<script>
    const text = document.querySelector(".text p");
    text.innerHTML = text.innerText.split("").map((letter, i) =>
    `<span style="transform:rotate(${i * 8.2}deg")>${letter}</span>`
    )
    .join("");
    </script>

Пустим разбитый на символы текст по кругу.

p span {
    position: absolute;
    left: 50%;/*позиция слева*/
    font-size: 1.2em;/*размер шрифта*/
    text-transform: uppercase;/*большие буквы*/
    transform-origin: 0 100px;/*точка исхода трансформации*/
}


Анимированный текст по кругу на JavaScript.

Создание анимации

Теперь заставим наш текст вращаться вокруг изображения.

@keyframes animate {
    0%
    {
        transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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