<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

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

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

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

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