<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

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

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

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

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

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

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

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

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

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

Уменьшение баннера при прокрутке страницы вниз

Уменьшение баннера при прокрутке страницы вниз

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


HTML разметка

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

<div class="banner"></div>
<div class="content">Здесь будет контент</div>

CSS код

Растянем на весь первый экран большое изображение и зафиксируем его, чтобы изображение не прокручивалось вместе со страницей.

.banner {
    background: url('banner.jpg') no-repeat center center;
    background-size: cover; // без потери пропорций
    position: fixed; // фиксация картинки наверху
    height: 100vh; // высота на весь экран
    width: 100%; // по ширине на весь экран
}

.content {
    background-color: #fff; // цвет фона под контент
    height: 2000px; // высота блока с контентом
    position: relative;
    top: 100vh;
}

JavaScript код

Нам нужно отследить событие прокрутки, поэтому первым аргументом вешаем слушатель addEventListener на событие scroll. Вторым аргументом через запятую передаем функцию. Внутри function объявляем переменную scroll (название дается по смыслу) и присваиваем ей свойство pageYOffset (отступ сверху). Находим наш баннер по селектору и присваиваем его второй переменной.

Что делает свойство pageYOffset?

Оно возвращает число пикселей, на которое была прокручена страница по вертикали.

window.addEventListener('scroll', function () {
    let scroll = window.pageYOffset;
    let banner = document.querySelector('.banner');
    banner.style.transform = ('translate3d(0,' + (scroll / 100) + '%,0) scale(' + (100 - scroll / 100) / 100 + ')');
});

В последней строке мы указываем, что при прокрутке для баннера в стилях следует применить свойство 3d-трансформации transform со значениями translate3d (плавно менять местоположение) и scale (плавно уменьшать баннер). Внутри translate3d передадим три параметра:

  • X - 0
  • Y - текущая позиция прокрутки поделенная на 100 и плюс проценты.
  • Z - 0

Если вас заинтересовало, как с помощью JavaScript можно создавать много чего полезного для сайта, то приглашаю вас познакомиться с моим видеокурсом. Курс помимо всей необходимой теоретической информации, содержит много практических примеров и упражнений. За более подробной информацией, переходите прямо сейчас!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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