поворот блоков
Вложений: 1
Привет всем
Помогите пожалуйста с заданием, есть 16 блоков, их надо заставить поворачиваться как карта в этом примере: http://www.xiper.net/examples/html-a...lip-click.html надо сделать так что бы по нажатию кнопки запускалась анимация переворота на блоках по очереди,желательно осуществить это с помощью таймера, блок должен поворачиваться за 2 секунды, но каждый следующий блок должен начать свою анимацию через 1.5 секунды после того как начал свою анимацию блок перед ним |
Megazupik, вы бы хоть выложили то, что уже написали...
|
Megazupik,
http://codepen.io/zavoloklom/details/eNaEBM |
считайте просто 16 дивов в контейнере и всё
|
Цитата:
|
Цитата:
http://javascript.ru/forum/showthrea...506#post438521 |
Цитата:
|
Megazupik,
попробуйте сначала сделать одновременный поворот всех блоков.можно через смену класса родителя всех блоков. |
<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> |
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> |
Ого спасибо, не ожидал что тут за просто так сделают для меня всю работу, хоть и не приятно но должен попросить о некоторых коррективах. В логе надо указывать старт работы скрипта вначале, и завершение работы в конце, а так же надо указывать начало и конец анимации каждого блока, и что бы выводился его номер при этом
|
Megazupik,
начало у всех в один момент, в момент клика, окончание по порядку расположения в DOM |
Цитата:
Начало процесса начало поворота блока 1 начало поворота блока 2 конец поворота блока 1 конец поворота блока 2 ... и так до 16 блока Конец процесса |
Megazupik,
могу предложить только фейковое окончание var n = 0; function showMessage() { textarea.value += "\nКонец процесса " + (n+1); n = ++n % card.length } |
Цитата:
|
Megazupik,
button.addEventListener("click", function() { button.value = "в процессе"; textarea.value += "\nНачало процесса"; element.classList.toggle("flip") }, false); var n = 0; function showMessage() { textarea.value += "\nКонец процесса " + (n+1); n = ++n % card.length; if(!n) button.value = "пуск" } Учебник |
Я просто игрался. Не кроссбраузерно.
<!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 .card.flip { /* добавляя этот класс, поворачивеам контейнер на 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"), card = document.querySelectorAll(".card"); button.addEventListener("click", function(){ element.classList.toggle('flip'); textarea.value+="\n"+'Item #1 Start'; },false); [].forEach.call( card, function(child, i) { var delay = i * 1.5, duration = "2s"; //лучше в css перенести из скрипта child.style.webkitTransitionDelay = delay + "s"; child.style.transitionDelay = delay + "s"; child.style.webkitTransitionDuration = duration; child.style.transitionDuration = duration; child.addEventListener('transitionend',function(e){ textarea.value+="\n"+'Item #'+(i+1)+' End'; var nextCard=this.nextElementSibling; if(nextCard!==null){ nextCard.classList.toggle('flip'); var num=i+2; setTimeout(function(){ textarea.value+="\n"+'Item #'+num+' Start'; },parseFloat(nextCard.style.transitionDelay.replace(/[^\d,\.]+/gim,''))*1000); }; }); }); }, false); if(document.readyState=='complete') window.dispatchEvent(new Event('DOMContentLoaded')); </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> |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>CSS3 flip</title> <!-- ===== style sheets ===== --> <style> * { margin: 0; padding: 0; } .container { width: 200px; 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 { /* поворачивать будем общий контейнер */ line-height: 50px; text-align: center; width: 50px; height: 50px; border: 2px solid blue; box-sizing: border-box; } .container.flip .card { /* добавляя этот класс, поворачивеам контейнер на 180 градусов */ -webkit-transform: rotateX( 180deg ); -moz-transform: rotateX( 180deg ); -ms-transform: rotateX( 180deg ); -o-transform: rotateX( 180deg ); transform: rotateX( 180deg ); } textarea, input{ width: 100%; resize: none; } </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 * 0.5; child.style.webkitTransitionDelay = delay + "s"; child.style.transitionDelay = delay + "s"; child.style.webkitTransitionDuration = "2s" ; child.style.transitionDuration = "2s" ; }); // начать повторы с интервалом 0.5 сек 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"> 1 </div> <div class="card"> 2 </div> <div class="card"> 3 </div> <div class="card"> 4 </div> <div class="card"> 5 </div> <div class="card"> 6 </div> <div class="card"> 7 </div> <div class="card"> 8 </div> <div class="card"> 9 </div> <div class="card"> 10 </div> <div class="card"> 11 </div> <div class="card"> 12 </div> <div class="card"> 13 </div> <div class="card"> 14 </div> <div class="card"> 15 </div> <div class="card"> 16 </div> <input type="button" value="пуск" id="button" /><br> <textarea name="" rows="30" ></textarea> </div> </body> </html> Вот получившийся у меня код, как его модифицировать так что бы было как у вас? то есть начало поворота карты отображалось в логе. В вашем коде я так и не понял как сделать так что бы вращение следующей карты наступало до конца вращения предыдущей |
Цитата:
|
Цитата:
|
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() { button.value = "в процессе"; textarea.value += "\nНачало процесса"; element.classList.toggle("flip") }, false); var n = 0; function showMessage() { textarea.value += "\nКонец процесса " + (n+1); n = ++n % card.length; if(!n) button.value = "пуск" } 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> |
Часовой пояс GMT +3, время: 22:41. |