.each() для анимации
Добрый день уважаемые. Помогите разобраться с анимацией. Есть вот такой набросок.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.exampl{
width: 100%;
height: 100px;
margin: 1%;
}
.pic1{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm1.png?raw=true) no-repeat 50% 50%;
}
.pic2{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm2.png?raw=true) no-repeat 50% 50%;
}
.pic3{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm3.png?raw=true) no-repeat 50% 50%;
}
.rightBl{
width: 100%;
height: 700px;
perspective: 1000px;
}
.bl{
float: left;
margin-left: 1%;
width: 80px;
height: 80px;
border: 1px solid black;
}
.rotPic{
animation: rotateImg 3s ease-in normal;
animation-fill-mode: forwards;
}
@keyframes rotateImg{
0%{
transform: rotateY(0deg);
transform-origin: center center;
}
100%{
transform: rotateY(5turn);
transform-origin: center center;
}
}
</style>
</head>
<body>
<div class="exampl">
<div class="bl pic1"></div>
<div class="bl pic2"></div>
<div class="bl pic3"></div>
</div>
<div class="rightBl">
<div class="bl rotPic"></div>
<div class="bl "></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
</div>
<script type="text/javascript">
var pic = $(".rightB .bl"),
rotate = $(".rotPic");
setInterval(function(){
$.each(pic, function(indx){
$(this).addClass('rotPic');
});
setInterval(function(){
$.each(pic, function(indx){
$(this).removeClass('rotPic');
});
},5000);
},24000);
</script>
</body>
</html>
Теперь я опиши как оно должно работать: 1)Каждому элементу $(".rightB .bl") присваевается фоном первая картинка смайла. 2) Через 2сек каждому элементу $(".rightB .bl"), по очереди(с задержкой 1.5сек) присваевается класс с анимацией $(".rotPic"). Тут подробнее опишу - Первая картинка начала крутиться, на половине анимации $(".rotPic") (1.5сек) начинает крутиться вторая картинка. На 2.99сек у первой картинки происходит смена фона на смаил2. удаляеться класс $(".rotPic"). Аналогично присходит с второй картинкой, Ей присвоился класс с задержкой 1,5сек от первой, на половине её анимации уже третьей картинке присваиваеться класс $(".rotPic") и тд. пока не переберем все 8 картинок, и у них у всех будет фоном Смаил 2. Дальше цикл повторяеться, только теперь смаил 2 меняеться на смаил 3 и так далие. 3) Когда у всех будет Смаил 3 картинки снова начинают крутится и всё это меняеться на Смаил 1. Подскажите как реализовать? Я начал с того что каждому элементу добавляю класс с анимацией addClass('rotPic'); Но тут нужна задержка. + меня смущает что надо постоянно удалять и прибавлять этот класс. Может можно как то проще ? :write: |
последовательная анимация
Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
.exampl{
width: 100%;
height: 100px;
margin: 1%;
}
.pic1{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm1.png?raw=true) no-repeat 50% 50%;
}
.pic2{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm2.png?raw=true) no-repeat 50% 50%;
}
.pic3{
background: url(https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/smiles/sm3.png?raw=true) no-repeat 50% 50%;
}
.rightBl{
width: 100%;
height: 700px;
perspective: 1000px;
}
.bl{
float: left;
margin-left: 1%;
width: 80px;
height: 80px;
border: 1px solid black;
}
.rotPic{
animation: rotateImg 3s ease-in normal;
animation-fill-mode: forwards;
}
@keyframes rotateImg{
0%{
transform: rotateY(0deg);
transform-origin: center center;
}
100%{
transform: rotateY(5turn);
transform-origin: center center;
}
}
</style>
</head>
<body>
<div class="exampl">
<div class="bl pic1"></div>
<div class="bl pic2"></div>
<div class="bl pic3"></div>
</div>
<div class="rightBl">
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
</div>
<script type="text/javascript">
var pic = $(".rightBl .bl"),
cls = ["pic1", "pic2", "pic3"],
i = 0,
len = cls.length,
n = pic.length - 1,
anim = "rotPic";
$.each(pic.addClass(cls[i]), function(indx) {
$(this).addClass(anim).css({
"animation-delay": indx * 1.5 + "s"
}).on("webkitAnimationEnd animationend", function() {
$(this).removeClass(cls[i]).addClass(cls[(i + 1) % len]).removeClass(anim);
if (indx == n) window.setTimeout(function() {
i = ++i % len;
pic.addClass(anim)
}, 0)
})
});
</script>
</body>
</html>
|
Круто, спасибо
|
| Часовой пояс GMT +3, время: 14:01. |