Как реализовать подобное смешение блоков?

Question

Все привет! Подскажите пожалуйста, как реализовать подумаю ситуацию) через анимацию или с помощью js? Буду очень благодарна за помощь) Смогу перевести благодарность на карточку)

Answer 1

Для анимации использовал GSAP

function Shift() {
  let items = [...document.querySelectorAll('.slide__item')],
      texts = items.map(e => e.innerHTML);
  items.map((e, i) => {
    e.innerHTML = i < texts.length - 1 ? texts[i + 1] : texts[0]
  });
}

const tl = gsap.timeline({
  delay: 2,
  onComplete: function() {
    tl.restart(true).invalidate()
    Shift();
  }
})

tl.to('.slide__item:nth-child(2)', {
  left: gsap.getProperty('.slide__item:first-child', 'left'),
  top: gsap.getProperty('.slide__item:first-child', 'top'),
  width: gsap.getProperty('.slide__item:first-child', 'width'),
  height: gsap.getProperty('.slide__item:first-child', 'height'),
  borderColor: gsap.getProperty('.slide__item:first-child', 'border-color'),
  color: gsap.getProperty('.slide__item:first-child', 'color'),
  fontSize: gsap.getProperty('.slide__item:first-child', 'font-size'),
  padding: gsap.getProperty('.slide__item:first-child', 'padding'),
}, '')

tl.to('.slide__item:first-child', {
  left: gsap.getProperty('.slide__item:last-child', 'left'),
  top: gsap.getProperty('.slide__item:last-child', 'top'),
  width: gsap.getProperty('.slide__item:last-child', 'width'),
  height: gsap.getProperty('.slide__item:last-child', 'height'),
  borderColor: gsap.getProperty('.slide__item:last-child', 'border-color'),
  color: gsap.getProperty('.slide__item:last-child', 'color'),
  fontSize: gsap.getProperty('.slide__item:last-child', 'font-size'),
  padding: gsap.getProperty('.slide__item:last-child', 'padding'),
}, '')

tl.to('.slide__item:not(:first-child):not(:nth-child(2))', {
  left: '-=170px'
}, '')

.slide {
  display: block;
  min-width: 680px;
  position: relative;
}

.slide__text {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  position: absolute;
  top: calc(250px / 2);
  right: 0;
  transform: translateY(-50%);
}

.slide__text>p {
  border-right: 2px solid #ef7859;
  font-size: 150%;
  padding-right: 40px;
  box-sizing: border-box;
  margin: 0;
}

.slide__text>p>span {
  display: block;
  color: #ef7859;
}

.slide__slide {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 420px;
  position: relative;
}

.slide__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid #ccc;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
  position: absolute;
  top: 270px;
}

.slide__item:nth-child(2) {
  left: 0;
}

.slide__item:nth-child(3) {
  left: 170px;
}

.slide__item:nth-child(4) {
  left: 340px;
}

.slide__item:nth-child(5) {
  left: 510px;
}

.slide__item--active {
  width: 250px;
  height: 250px;
  border-color: #ef7859;
  font-size: 150%;
  padding: 20px;
  color: #ef7859;
  top: 0;
  left: 35px;
}

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>


<div class="slide">
  <div class="slide__text">
    <p>Нас выбрали уже<span>тысячи автолюбителей</span>по всей России</p>
  </div>
  <div class="slide__slide">
    <div class="slide__item slide__item--active">Используем свой&nbsp;подвижный состав</div>
    <div class="slide__item">Доставляем по&nbsp;РФ от&nbsp;14&nbsp;дней</div>
    <div class="slide__item">Понимаем вас с&nbsp;полуслова</div>
    <div class="slide__item">Работаем без посредников</div>
    <div class="slide__item">Помогамем на&nbsp;всех этапах сделки</div>
  </div>
</div>

БЛОГ НА HUSL

Как реализовать подобное смешение блоков?

Ответы (1 шт):