Подскажите с анимацией
Подскажите пожалуста как зделать так что-бы при нажатии на
<div>.А там у меня какойто текст.Происходила анимация что <div> переворачиваетса на другую сторону и писалса иной текст,как будто вы перевернули листок бумаги.Сейчас же у меня просто по нажатию на этот див пишетса другой текст. Подскажите пожалуста,искал что-то подобное в Jquery не нашол. |
Я видел такой плагин. Поищите тут.
|
может я неумею правильн оискать но ненашол ничево подходящего.Сейчас делаю это просто вот так
<html> <head> <script type="text/javascript"> document.getElementById('id5').style.display='none'; function text(el){ document.getElementById('id5').style.display=''; el.style.display = 'none'; } </script> </head> <body> <div id="id4" onclick = "text(this)" style="border:5px solid black; width:100px ;height:100px">Здесь ваш текст</div> <div id="id5" style="border:5px solid red; width:50px; height:50px"> Новый текст</div> </body> </html> Либо же просто делаю вот так <html> <head> <script type="text/javascript"> function text(){ document.getElementById('id4').innerHTML='Новый текст'; } </script> </head> <body> <div id="id4" onclick = "text()" style="border:5px solid black; width:100px ;height:100px">Здесь ваш текст</div> </body> </html> А как зделать так что-бы в <body> у меня был один <div> и по нажатию на него происходила анимация переворачивания этого <div> и текст изменялса на какойто новый. |
Цитата:
|
Цитата:
Буду вам очень признателен если вы найдете эту анимацию.А то за целый день смешивания анимаций которые я знаю и находил ничево недобился путёвого. |
Цитата:
Вся о ней информация здесь: http://www.simpleviewer.net/tiltviewer/support/ |
<div id="animation" style="width:100px;height:100px;background:Black;color:White;text-align:center;">Word</div> function animate() { var el = document.getElementById("animation"), animation = {}; animation = setInterval(function() { var degree = "", model = (typeof el.style.webkitTransform !== "undefined") ? "webkitTransform" : (typeof el.style.MozTransform !== "undefined") ? "MozTransform" : "msTransform", transform = el.style[model]; degree = +transform.replace(/\D/g, ""); console.log(degree); el.style[model] = "rotate(" + (degree + 5) + "deg)"; if(degree === 175) { clearInterval(animation); } }, 10); } window.onload = animate; П.С. Если это то что нужно, то в я сделаю нормально сегодня вечером. Щас на работе нету времени. |
Ervin,
это что-то похожее,только переворачиваетса не на другую сторону дива а вверх тормашками.Я имею ввиду что оно должно переворачиватса как листки в тетрадке.Возвожно ли такое вообще сделать?И если вы можете такое сделать,то я буду вам очень признателен. И не могли бы вы обьяснить что здесь происходит? animation = setInterval(function() { var degree = "", model = (typeof el.style.webkitTransform !== "undefined") ? "webkitTransform" : (typeof el.style.MozTransform !== "undefined") ? "MozTransform" : "msTransform", transform = el.style[model]; degree = +transform.replace(/\D/g, ""); console.log(degree); el.style[model] = "rotate(" + (degree + 5) + "deg)"; if(degree === 175) { clearInterval(animation); } }, 10); } |
Gosha-K,
Спасибо что нашли,посмотрел почитал,будет тоже наверное полезно.Но сейчас это все реализовано на флеше.А хотят перейти к JavaScript'у |
Нечто похожее, да. Не так как на kindle, но что-то похожее, можно сделать. Завтра вечером скину source.
|
Часовой пояс GMT +3, время: 14:45. |