<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создать аккордеон на JS

Как создать аккордеон на JS

Первоначальное сокрытие части контента на сайте реализуется по принципу "аккордеона" - раскрывать и сворачивать. В свернутом виде пользователь видит только заголовок текстового блока и если информация его заинтересовала, то при клике, раскрывается остальной контент.

HTML код

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

<div class="accordion">
  <div class="contentBx">
    <div class="label">List One</div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.</p>
    </div>
  </div>
</div>


Как создать аккордеон на JS.

Позиционирование

Выравнивание контейнера accordion в центре экрана.

@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #FFCCBC;
}
.accordion {
    width: 800px;
}


Как создать аккордеон на JS.

Стилизация контентного блока

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

.accordion .contentBx {
    position: relative;
    height: auto;
    margin: 10px 20px;
}
.accordion .contentBx .label {
    position: relative;
    padding: 10px;
    background: #E64A19;
    color: #fff;
    cursor: pointer;
}
.accordion .contentBx .label:before{
    content: '+';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.5em;
}
.accordion .contentBx.active .label:before{
    content: '-';
}


Как создать аккордеон на JS.

Скрытие контента

CSS код описывает два состояния видимости контента.

.accordion .contentBx .content{
    overflow: hidden; / * контент скрыт * /
    height: 0;
    background: #fff;
    visibility: hidden; / * контент скрыт * /
    transition: 0.5s;
    overflow-y: auto;
}
.accordion .contentBx.active .content{
    height: 150px;
    padding: 10px;
    visibility: visible; / * контент виден * /
}


Как создать аккордеон на JS.

Функция переключения

Сейчас имеем два состояния у контента, но что-то должно переключать одно состояние на другое. При клике в любом месте области contentBx, запускается цикл for. Этот цикл с помощью счетчика запускает функцию столько раз, пока условие верно. Функция отслеживает клик с помощью метода addEventListener и с помощью другого метода classList добавляет класс active, если его нет и удаляет класс. если он есть. Вот так работает переключатель.

const acc = document.getElementsByClassName("contentBx");
for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
    });
}

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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