0

Как сделать подобную анимацию

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

Пишу следующее

HTML

<div class="pos">
  <div class="q-1 active"></div>
  <div class="q-2 active"></div>
  <div class="q-3 active"></div>
  <div class="q-4 active"></div>
</div>

CSS

.pos {
  margin-top: 150px;
}

.q-1,
.q-2,
.q-3,
.q-4,
.q-5,
.q-6,
.q-7 {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 1px;
  background: red;
}
.q-1.active:after{
  position: absolute;
  content:url('flower-1.png');
  height:145px;
  top:-145;
}
.q-2.active:after{
  position: absolute;
  content:url('flower-2.png');
  height: 91px;
  top: -92px;
}
.q-3.active:after{
  position: absolute;
  content:url('flower-3.png');
  height: 120px;
  top: -120px;
}
.q-4.active:after{
  position: absolute;
  content:url('flower-4.png');
  height: 95px;
  top: -95px;
}

JS

el=$(".pos div")
cnt=0
$(".pos div").each(function(i,e){
  setInterval(function(){
    el.eq(cnt++).addClass("active")
  },2000)  
  el.removeClass("active")
})
6
  • пишу следующее........и......? 10 ноя 2016 в 16:58
  • что и?,неполучилось
    – G_test_00
    10 ноя 2016 в 16:59
  • А что именно не получилось - надо бы догадаться, да? Были ли ошибки или просто код встает с кресла и бьет учебником по голове? А где html разметка? А где точки с запятыми в коде? Бастуют? 10 ноя 2016 в 17:01
  • 1
    Есть вот такая простая либа для спрайтовых анимаций: blaiprat.github.io/jquery.animateSprite 10 ноя 2016 в 17:06
  • html добавил,нет эта либа не подходит
    – G_test_00
    10 ноя 2016 в 17:07

1 ответ 1

2

var func = window.setInterval(start, 2000),
    els = $("div"),
    cnt = 0;

function start() {
  cnt = (cnt === els.length) ? 0 : cnt;
  
  els.removeClass("active");
  els.eq(cnt++).addClass("active")
}
.q-1,
.q-2,
.q-3,
.q-4,
.q-5,
.q-6,
.q-7 {
  background: #ccc;
  position: relative;
  display: inline-block;
  height: 145px;
  width: 40px;
  border-bottom: solid 2px red;
  font: bold 1em sans-serif;
}

.q-1.active:after,
.q-2.active:after,
.q-3.active:after,
.q-4.active:after,
.q-5.active:after,
.q-6.active:after,
.q-7.active:after {
  position: absolute;
    left: 15px;
    top: 10px;
}

.q-1.active:after{ content:"1"; }
.q-2.active:after{ content:"2"; }
.q-3.active:after{ content:"3"; }
.q-4.active:after{ content:"4"; }
.q-5.active:after{ content:"5"; }
.q-6.active:after{ content:"6"; }
.q-7.active:after{ content:"7"; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="q-1"></div>
<div class="q-2"></div>
<div class="q-3"></div>
<div class="q-4"></div>
<div class="q-5"></div>
<div class="q-6"></div>
<div class="q-7"></div>

2
  • Вы забыли условие добавить обнуление счетчика 10 ноя 2016 в 17:17
  • @АлексейШиманский поправил :) 10 ноя 2016 в 17:20

Ваш ответ

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

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