<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

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

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

Подпишитесь на мой канал на 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):

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