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
    7 июн 2022 в 16:51
  • @novvember хочу сделать движение через js. Мой способ на данный момент - это сделать позицию релатив для общей обертки и позицию абсолют для каждой картинки внутри, а потом уже написать через top, left итд параметры в пикселях. Просто думаю, что может есть более правильный вариант?
    – Marie
    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
    8 июн 2022 в 9:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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