<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Анимированный footer у веб-сайта (продолжение)

Анимированный footer у веб-сайта (продолжение)

На прошлом уроке мы создали футер, украшенный волной, в его верхней части. Согласитесь, что неплохо было бы оживить нашу волну - сделать анимацию.


HTML разметка


Добавим в HTML-код четыре волны с разными идентификаторами.

<div class="waves">
    <div class="wave" id="wave1"></div>
    <div class="wave" id="wave2"></div>
    <div class="wave" id="wave3"></div>
    <div class="wave" id="wave4"></div>
</div>


Анимированный footer у веб-сайта.


CSS стили


На данный момент все волны имеют одну и ту же позицию. Наша задача с помощью CSS-стилей раскидать все волны по разным слоям с разной прозрачностью и небольшим сдвигом. Волна #wave1 окажется на самом верхнем слое. А каждому слою задать бесконечную анимацию с разной длительностью цикла.

footer .wave#wave1{
    z-index: 1000;/*на верхнем слое*/
    opacity: 1;/*полная непрозрачность*/
    bottom: 0;/*позиция снизу*/
    animation: animate 4s linear infinite;/*свойства анимации*/
}
footer .wave#wave2{
    z-index: 999;
    opacity: 0.5;/*прозрачность 50%*/
    bottom: 10px;
    animation: animate2 4s linear infinite;
}
footer .wave#wave3{
    z-index: 998;
    opacity: 0.2;
    bottom: 15px;
    animation: animate 3s linear infinite;
}
footer .wave#wave4{
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animate2 3s linear infinite;
}

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


Создадим две анимации (animate, animate2) с двумя кадрами, где будет происходить смена позиции фона по координате X. Амплитуда движения волны составляет от 0 до 1000 пикселей.

@keyframes animate{
    0%,100%
    {
        background-position-x: 1000px;
    }
    100%
    {
        background-position-x: 0px;
    }
}
@keyframes animate2
{
    0%,100%
    {
        background-position-x: 0px;
    }
    100%
    {
        background-position-x: 1000px;
    }
}


Анимированный footer у веб-сайта.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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