Подскажите с анимацией
Подскажите пожалуста как зделать так что-бы при нажатии на
<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, время: 08:53. |