<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Анимированный фон с Parallax эффектом

Анимированный фон с Parallax эффектом

Сегодня вы узнаете, как при помощи готового решения Parallax плагина, можно анимировать фон при движении мышью. В качестве фона у нас будет космическое пространство по которому двигаются планеты. Работу Parallax эффекта можно увидеть на демо-странице данного плагина.

Подготовка изображений

Нам необходимо подготовить картинку звездного неба и несколько отдельных изображений с планетами. Для этой задачи отлично подойдет онлайн-сервис canva.com с бесплатным функционалом. Он удобен тем, что в одном месте можно подбирать картинки и собирать дизайн.

1) Создать дизайн


Анимированный фон с parallax эффектом.

2) Поиск изображений

Найдем в разделе «Фон» картинку звездного неба, а в разделе «Элементы» - планеты.


Анимированный фон с parallax эффектом.

3) Добавим картинки в дизайн

У canva нет слоев, как у фотошопа. Поэтому вместо слоев будем использовать страницы. На одной странице - одна картинка. Поставим планеты сразу в нужное место на странице, так мы избежим необходимости в позиционировании планет в CSS коде. Для обучающих целей такая «халтура» прокатит, но не делайте так на реальных проектах (не оставляйте большие пустые области в графических файлах).


Анимированный фон с parallax эффектом.

4) Скачать изображения


Анимированный фон с parallax эффектом.

Реализация parallax эффекта

Подключим к HTML-документу плагин parallax.js.

HTML разметка

Создадим контейнер с классом space. Для каждого изображения планеты создадим свой div с классом item . Добавим data-depth с разными значениями скорости для движения планет.

<div class="space" id="space">
    <div class="item" data-depth="0.4"><img src="2.png" alt="" /></div>
    <div class="item" data-depth="1"><img src="3.png" alt="" /></div>
    <div class="item" data-depth="0.8"><img src="4.png" alt="" /></div>
    <div class="item" data-depth="0.6"><img src="5.png" alt="" /></div>
</div>

CSS стили

Обнулим маржины и паддинги.

body {
    padding: 0;
    margin:0;
    width: 100%;
    height: 100vh;
}

Зададим размеры для контейнера на всю высоту и ширину экрана и добавим космический фон.

.space {
    width: 100%;
    height: 100vh;
    background: url(1.jpg) center no-repeat;
    background-size: cover;
    overflow: hidden;
}

Установим размеры для картинок.

img {
    max-width: 100%;
    height: auto;
}

Инициализация плагина на JS

Получим наш контейнер по идентификатору и применим к нему метод Parallax.

let space = document.getElementById('space');
let parallaxInstance = new Parallax(space);


Анимированный фон с parallax эффектом.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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