4

введите сюда описание изображения

.wrap {
  position: relative;
  margin-top: 50px;
  padding: 20%;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 80px;
  background: #00d6d6;
}

.card-first{
  top: -30px;
  left: 20px;
  background: red;
}
<div class="wrap">
  <div class="card">
    Текст отзыва1
  </div>
  <div class="card">
    Текст отзыва2
  </div>
  <div class="card card-first">
    Текст отзыва3
  </div>
  <div class="card">
    Текст отзыва4
  </div>
</div>

4
  • что значит перемещаются по кругу? Просто циклически и непрерывно? Или с остановкой? Или какие-то события и обработчики должны быть привязаны? Уточните.
    – UModeL
    9 окт 2018 в 8:26
  • Непрерывно, как бесконечный слайдер
    – stiv
    9 окт 2018 в 8:40
  • т.е. чтобы не успевали прочитать? ))
    – UModeL
    9 окт 2018 в 8:45
  • Вообще в идеале можно задать любой интервал. И ещё данная анимация больше для оформления в целом ;)
    – stiv
    9 окт 2018 в 9:00

3 ответа 3

3

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

window.onload = function() {
  let aCards = document.querySelector('.wrap').children;
  let i = aCards.length;
  while (i--) {
    aCards[i].style.background = 'hsl(' + (i * 60) + ',100%,50%)';
    aCards[i].style.animationDelay = i + 's';
    aCards[i].classList.add('rotator');
  }
}
.wrap {
  position: relative;
  margin-top: 50px;
  padding: 20%;
}

.card {
  position: absolute;
  top: -30px;
  left: 20px;
  width: 300px;
  height: 80px;
  border: 2px solid #444;
  opacity: 0.0;
}

.rotator {
  animation: 4s ease-in infinite front;
}

@keyframes front {
  0%   { top: -30px; left: 20px; opacity: 0.0; }
  15%  { top: -30px; left: 20px; opacity: 0.99; z-index: 0; }
  55%  { top: 0px;   left: 0px;                 z-index: 2; }
  70%  { top: 0px;               opacity: 0.99; z-index: 3; }
  99%  { top: 90px;  left: 0px;  opacity: 0.0;  z-index: 4; }
  100% { top: -30px; left: 20px;                z-index: 0; }
}
<div class="wrap">
  <div class="card">Текст отзыва1</div>
  <div class="card">Текст отзыва2</div>
  <div class="card">Текст отзыва3</div>
  <div class="card">Текст отзыва4</div>
</div>

0

setInterval(function(){
  var cardFirst = $('.wrap').find('.card-first'),
      cardFirstIndex = cardFirst.index(),
      nextCard = $('.wrap').find('.card.next');

  cardFirst.removeClass('card-first');
  $(`.card:eq(${nextCard.index()})`).addClass('card-first');

  nextCard.removeClass('next');
  $(`.card:eq(${nextCard.index() - 1})`).addClass('next');
  }, 1000);
.wrap {
  position: relative;
  margin-top: 50px;
  padding: 20%;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 80px;
  background: #00d6d6;
  transition: all 1s;
  z-index: 11;
}

.card-first{
  top: 30px;
  left: 20px;
  background: red;
  z-index: 13;
}
.next{
  z-index:12;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="card">
    Текст отзыва1
  </div>
  <div class="card">
    Текст отзыва2
  </div>
  <div class="card next">
    Текст отзыва3
  </div>
  <div class="card card-first">
    Текст отзыва4
  </div>
</div>

Код не из лучших, но рабочий. За место анимации, сделал переходы в 1с, интервал задается в JS

0

Советую использовать Animate.css и wow.js

Пример использования:

<link rel="stylesheet" href="css/aminate.min.css" />

<div class="custom-block wow fadeInUp" data-wow-offset="300"></div>

<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>

В конечном итоге, custom-block плавно "выедет" из нижнего края экрана.

1
  • вы описали просто анимацию появления, но не последовательную цикличную анимацию блоков
    – stiv
    10 окт 2018 в 1:16

Ваш ответ

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

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