Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2017, 19:15
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

поворот блоков
Привет всем

Помогите пожалуйста с заданием, есть 16 блоков, их надо заставить поворачиваться как карта в этом примере:
http://www.xiper.net/examples/html-a...lip-click.html
надо сделать так что бы по нажатию кнопки запускалась анимация переворота на блоках по очереди,желательно осуществить это с помощью таймера, блок должен поворачиваться за 2 секунды, но каждый следующий блок должен начать свою анимацию через 1.5 секунды после того как начал свою анимацию блок перед ним
Изображения:
Тип файла: jpg MmZJzreOJ-o[1].jpg (17.3 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2017, 19:22
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,484

Megazupik, вы бы хоть выложили то, что уже написали...
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2017, 20:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

Megazupik,
http://codepen.io/zavoloklom/details/eNaEBM
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2017, 20:15
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

считайте просто 16 дивов в контейнере и всё
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2017, 20:37
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

Сообщение от рони Посмотреть сообщение
Megazupik,
http://codepen.io/zavoloklom/details/eNaEBM
Красиво, но я не знаю как извлечь пользу из этого для себя
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2017, 20:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

Сообщение от Megazupik
блок должен поворачиваться за 2 секунды, но каждый следующий блок должен начать свою анимацию через 1.5 секунды после того как начал свою анимацию блок перед ним

http://javascript.ru/forum/showthrea...506#post438521
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2017, 20:43
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

Сообщение от рони Посмотреть сообщение

http://javascript.ru/forum/showthrea...506#post438521
ситуация возможно похожая, но жаваскрипт я вижу второй день, и модифицировать под себя не могу
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2017, 20:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

Megazupik,
попробуйте сначала сделать одновременный поворот всех блоков.можно через смену класса родителя всех блоков.
Ответить с цитированием
  #9 (permalink)  
Старый 22.04.2017, 21:01
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 428

<style>
*{margin: 0; adding: 0;}
.container {
    margin: 100px auto auto 100px;
    position: relative;
    width: 190px;
    height: 266px;
    /* задаем глубину сцене */
    perspective: 600px; /* св-во по стандартам */

}


#card { /* поворачивать будем общий контейнер */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
    transform-style: preserve-3d;   /* указываем, что дочерние элементы находятся в 3D пространстве */

}

#card.flip {    /* добавляя этот класс, поворачиваем контейнер на 180 градусов */
    transform: rotateY( 180deg );
}

figure {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    backface-visibility: hidden;    /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */
}

.back {
    background: green;
}

.front {
    background: blue;
    transform: rotateY( 180deg );   /* в начальном положении фэйс карты к нам развернут на 180 градусов */
}

</style>

<div class="container" id="container">
<div id="card" class="">
    <figure class="back"></figure>
    <figure class="front"></figure>
</div>
</div>

<input type="button" value="Start" id="button">

<script>
	var btn = document.getElementById("button");
	var smena = document.getElementById("card");
	btn.onclick = function(){
		smena.classList.toggle("flip");
	}
</script>

Последний раз редактировалось DivMan, 22.04.2017 в 21:05.
Ответить с цитированием
  #10 (permalink)  
Старый 22.04.2017, 21:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

Megazupik,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>CSS3 flip</title>

<!-- ===== style sheets ===== -->
<style>
* { margin: 0; padding: 0; }

.container {
  margin: 100px auto auto 100px;
  position: relative;
  display : flex;
  flex-wrap: wrap;
  /* задаем глубину сцене */
  -webkit-perspective: 600px; /* webkit */
  -moz-perspective: 600px; /* mozilla */
  -ms-perspective: 600px; /* IE 10 */
  -o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
  perspective: 600px;	/* св-во по стандатам */
}

.card { /* поворачивать будем общий контейнер */

  width: 190px;
  height: 266px;


  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -ms-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;	/* указываем, что дочерние элементы находятся в 3D пространстве */
}
.container.flip   .card {	/* добавляя этот класс, поворачивеам контейнер на 180 градусов */
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -ms-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

figure {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;	/* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back {
  background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
}
.front {
  background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );	/* в начальном положении фэйс карты к нам развернут на 180 градусов */
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var button = document.getElementById("button"),
        textarea = document.getElementsByTagName("textarea")[0],
        element = document.querySelector(".container"),
        card = document.querySelectorAll(".card");
        [].forEach.call( card, function(child, i) {
        var delay = i * 1.5;
        child.style.webkitTransitionDelay = delay + "s";
        child.style.transitionDelay = delay + "s";
        var duration = "2s"  //лучше в css перенести из скрипта
        child.style.webkitTransitionDuration = duration ;
        child.style.transitionDuration = duration ;
        });
    button.addEventListener("click", function() {
        textarea.value += "\nНачало процесса";
        element.classList.toggle("flip")
    }, false);

    function showMessage() {
        textarea.value += "\nКонец процесса"
    }
    element.addEventListener("transitionend", showMessage, false)
}, false);
</script>
</head>

<body>

<div class="container" id="container">
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
<div class="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
</div>

<input type="button" value="пуск" id="button" /><br>
<textarea name="" rows="30"  ></textarea>

</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт выравнивания высоты блоков razorg1991 Элементы интерфейса 13 14.01.2017 23:04
скрытие и показ блоков folkemon Общие вопросы Javascript 1 02.12.2016 08:06
Скрипт карусели блоков rozmakc Работа 3 25.07.2016 21:35
подскажите пожалуйста эффекты для показа нескольких блоков по скроллу greenwar jQuery 12 09.09.2014 18:50
Удаление глюков при появлении и исчезании блоков Сершей jQuery 5 25.08.2013 02:20