Блог

У меня есть идея для баннера на моем новом сайте, но я не могу понять, как это сделать или с чего начать, поэтому буду признателен за любую помощь.

Вот о чем я думаю:

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

Первая анимация будет для некоторого текста и круга, которые нужно вставить с левой стороны экрана.

Вторая анимация будет заключаться в том, что текст, который в данный момент находится на экране, будет сдвигаться вправо и исчезать непосредственно перед тем, как он попадет на уже существующее изображение круга, и одновременно будет вставляться новый текст. Вместе с текстом второй круг меньшего размера будет скользить и останавливаться поверх старого круга большего размера.

Третья анимация будет просто повторением второй анимации, но с изображением меньшего круга.

Пример:

Опять же, любая помощь была бы отличной и извините за любую предыдущую путаницу.

Большое спасибо Crackruckles.

Возможно, вы захотите взглянуть на jquery ui toggle(). Простой пример здесь https://jquerytipsntricks.wordpress.com/2013/07/21/slide-toggle-from-right-to-left-and-left-to-right-using-jquery-ui/comment-page-1/

Вот похожий, вы можете просто немного поработать по своему вкусу.

Пример

 <div class="one">
  <div class="two">
    <div class="three">

    </div>
  </div>
</div>
  

CSS:

      @keyframes toright {
  from {
    right: 600px;
  }
  to {
    right: 0;
  }
}

.container {
  padding: 0;
  height: 100px;
  width: 600px;
  border: 1px solid red; 
  vertical-align:middle;
  position: relative;
}

.container  div {
  display: inline-block;  
  background: rgba(0,0,255,0.3);
  border-radius: 50%;
  position: absolute;
  right: 0;
  top:5px;
}

.one {
  width: 70px;
  height: 60px;
  animation: 1s toright ease;
}
.two { 
  width: 60px;
  height: 50px;
  animation: 1.3s toright ease;
}
.three {
  width: 50px;
  height: 40px;
  animation: 1.5s toright ease;
}