<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

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

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

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

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

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

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

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

Анимация с пузырьками на JavaScript

Анимация с пузырьками на JavaScript

Много реалистичные пузырьков разных размеров, с разной скоростью поднимаются вверх, лопаясь на ходу. Как такое возможно сделать на JavaScript? Перед нами стоит многослойная задача. Ну что же, поехали!

Обозначим место для анимации

Пузырьковая анимация будет происходить внутри секции.

// HTML
<section>
    <h2>Bubbles</h2>
</section>

// CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}

body{
    overflow: hidden;
    height: 100vh;
    background: #111;
    background: #000;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Создание функции createCircle()

Как уже понятно из названия, наша функция должна генерировать пузырьки. Иными словами, на ходу создавать большие и маленькие окружности. Занесем в переменные два элемента: section и span (отвечает за внешний вид пузырька). Метод createElement создаст много элементов span (пузырек). Однако нам нужны пузырьки разного калибра для реалистичности. Метод Math.random() возвращает случайные числа, которые мы будем умножать на 60, чтобы исключить образования совсем мелких точек. Метод appendChild() добавит в секцию сгенерированные окружности.

function createCircle() {
    const section = document.querySelector('section')
    const circleEl = document.createElement('span')
    let size = Math.random() * 60;
    let duration = Math.random() * 10;
    circleEl.style.width = 20 + size+'px';
    circleEl.style.height = 20 + size+'px';
    circleEl.style.left = Math.random() * innerWidth + "px";
    section.appendChild(circleEl);
    ...

Внешний вид пузырька с бликом

span{
    position: absolute;
    bottom: -50px;
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    background-size: cover;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
    animation: animate 4s linear infinite;
}
span:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.25) translate(-70%,-70%);
    background: radial-gradient(#fff,transparent);
    border-radius: 50%;
}


Анимация с пузырьками на JavaScript.

Подготовка к анимации

Метод setTimeout вызывает переменную circleEl через заданный промежуток времени для периодического удаления пузырьков. Иначе будет завал.

    setTimeout(() => {
        circleEl.remove()
    }, 4000)
}

Метод setInterval запускает код функции createCircle через указанный промежуток времени. То есть, сдерживает производство окружностей.

setInterval(createCircle, 50)

Движение пузырьков вверх (создание анимации)

Пузырьки создаются, но все еще лежат внизу страницы и никуда не двигаются. В чем суть анимации? Создадим покадровую анимацию: на третьем кадре (100%) для оси Y установим значение -1200% с нулевой прозрачностью. Пузырьки поднимутся вверх и исчезнут (станут прозрачными).

@keyframes animate {
    0%
    {
        transform: translateY(0%);
        opacity: 1;
    }
    60%,99%
    {
        opacity: 1;
    }
    100%
    {
        transform: translateY(-1200%);
        opacity: 0;
    }
    }

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

Переходите на видеокурс по JavaScript и приобретайте необходимые навыки для получения востребованной профессии frontend-разработчика.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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