0

Ребят, помогите, пожалуйста. Вот у меня есть блок с элементами (отмеченные галочкой будут совершать движение с помощью js - совсем небольшое, цикличное, постоянное), другие 2 элемента не будут двигаться. Но как их разумно спозиционировать?? Схема, конечно, приблизительная)

Я попыталась сделать через flex, но код выходит ужасным (если писать через top, left, итд) + ко всему мне нужно это сделать адаптированным под ipad (1024x768), но когда я меняю все размеры - овсе съезжает, соответственно(((

Код прилагаю, но он неправильный - только для примера именно с использованием left и как это все некрасиво выглядит)

Верю, что есть красивое решение этого вопроса - прошу направить меня, спасибо!)

.main {
  display: flex;
  /* width: 100%; */
position: relative;
}

main > img {
position: absolute
}

.main-image__fourth {
  height: 231px;
}
.main-image__first {
  width: 125px;


}
.main-image__third {
  width: 221px;
}

.main-image__fifth {
    width: 257px;
    height: 85px;
    left: -594px;
    top: 503px;
}

.main-image__sixth {
  width: 1183px;
  height: 239px;
      left: -75px;
    top: 53px;
}
 <div class="main">
             <img class="main-image__fourth" src="/src/img/4.png" alt="">
            <img class="main-image__first" src="/src/img/1.png" alt="">
            <img class="main-image__third" src="/src/img/3.png" alt="">
            <img class="main-image__fifth" src="/src/img/5.png" alt="">
            <img class="main-image__sixth" src="/src/img/6.png" alt="">
          
          </div>

2
  • Как именно будут двигаться эти три элемента? Через css или через изменение абсолютного позиционирования через JS?
    – novvember
    Commented 7 июн. 2022 в 16:51
  • @novvember хочу сделать движение через js. Мой способ на данный момент - это сделать позицию релатив для общей обертки и позицию абсолют для каждой картинки внутри, а потом уже написать через top, left итд параметры в пикселях. Просто думаю, что может есть более правильный вариант?
    – Marie
    Commented 7 июн. 2022 в 18:48

1 ответ 1

1

Большей частью зависит все-таки от макета, что это, какие функции, и как будет анимировано. В общем случае, наверное, анимировать подойдет через JS и тогда, возможно позиционирование через position: absolute будет нормально.

Чтобы не съезжало при изменении размеров, используйте относительные единицы, например, тут в примере проценты везде.

@keyframes vertical {
  0% {transform: translateY(20%)}
  100% {transform: translateY(-20%)}
}

@keyframes horizontal {
  0% {transform: translateX(20%)}
  100% {transform: translateX(-20%)}
}

@keyframes diagonal {
  0% {transform: translate(30%, 30%)}
  100% {transform: translate(-30%, -30%)}
}


.blocks {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 50%;
  aspect-ratio: 1;
  background-color: #ccc;
  position: relative;
}

.block {
  width: 20%;
  height: 20%;
  position: absolute;
  opacity: .7;
}

.block_cyan {
  background-color: cyan;
  top: 0;
  left: 0;
}

.block_magenta {
  background-color: magenta;
  bottom: 5%;
  left: 5%;
}

.block_yellow {
  background-color: yellow;
  top: 10%;
  right: 10%;
  animation: diagonal 1s infinite alternate ease-in-out;

}

.block_black {
  background-color: black;
  top: 35%;
  right: 10%;
  animation: horizontal 1s infinite alternate ease-in-out;

}

.block_white {
  background-color: white;
  top: 45%;
  right: 0;
  width: 60%;
  animation: vertical 1.5s infinite alternate ease-in-out;
}
<ul class="blocks">
  <li class="block block_cyan"></li>
  <li class="block block_magenta"></li>
  <li class="block block_yellow"></li>
  <li class="block block_black"></li>
  <li class="block block_white"></li>
</ul>

1
  • поняла, большое спасибо за ответ!!
    – Marie
    Commented 8 июн. 2022 в 9:25

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.