Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.12.2016, 20:14
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

.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'); Но тут нужна задержка. + меня смущает что надо постоянно удалять и прибавлять этот класс. Может можно как то проще ?
Ответить с цитированием
  #2 (permalink)  
Старый 20.12.2016, 23:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

последовательная анимация
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>
Ответить с цитированием
  #3 (permalink)  
Старый 21.12.2016, 10:23
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Круто, спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт корзины для сайта EasyNetShop.ru Ваши сайты и скрипты 0 17.11.2016 14:57
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 13:50
Где найти анимации для слайдера Synov_son jQuery 6 16.10.2014 18:07
виджет, только сторона клиента (JS, JQUery, работа с датами, масштабирование) eugen35 Работа 4 31.07.2014 09:50
Начало анимации с места предыдущей анимации FanAizu (X)HTML/CSS 3 21.03.2014 12:39