04.04.2013, 15:54
|
|
Профессор
|
|
Регистрация: 09.02.2013
Сообщений: 165
|
|
|
Подскажите с анимацией
Подскажите пожалуста как зделать так что-бы при нажатии на
<div>
.А там у меня какойто текст.Происходила анимация что <div> переворачиваетса на другую сторону и писалса иной текст,как будто вы перевернули листок бумаги.Сейчас же у меня просто по нажатию на этот див пишетса другой текст.
Подскажите пожалуста,искал что-то подобное в Jquery не нашол. |
|
04.04.2013, 15:57
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Я видел такой плагин. Поищите тут.
Последний раз редактировалось tsigel, 04.04.2013 в 15:59.
|
|
04.04.2013, 16:20
|
|
Профессор
|
|
Регистрация: 09.02.2013
Сообщений: 165
|
|
может я неумею правильн оискать но ненашол ничево подходящего.Сейчас делаю это просто вот так
<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> и текст изменялса на какойто новый.
Последний раз редактировалось Vasy, 04.04.2013 в 16:32.
|
|
04.04.2013, 22:21
|
|
Интересующийся
|
|
Регистрация: 18.03.2013
Сообщений: 13
|
|
|
Сообщение от Gosha-K
|
|
А как зделать так что-бы в <body> у меня был один <div> и по нажатию на него происходила анимация переворачивания этого <div> и текст изменялса на какойто новый.
|
Видел такую анимацию, но только для фотогалереи, смотрится классно! Нажимаешь на фото и это фото переворачивается, а на обратной стороне написан текст. Соответственно текст редактируется. Я не помню туда ссылку, но если этот вариант подходит, то могу поискать... |
|
04.04.2013, 22:32
|
|
Профессор
|
|
Регистрация: 09.02.2013
Сообщений: 165
|
|
Сообщение от Gosha-K
|
|
Видел такую анимацию, но только для фотогалереи, смотрится классно! Нажимаешь на фото и это фото переворачивается, а на обратной стороне написан текст. Соответственно текст редактируется. Я не помню туда ссылку, но если этот вариант подходит, то могу поискать...
|
очень даже подходит,было бы неплохо,если вам нетрудно можете вспомнить где вы ёё нашли?По сути неважно что там фото или текс,просто заменить фото на текст совсем не трудно.да и зделать так что-бы на обратной стороне текс нельзя было редактировать,тоже думаю проблемой являтса не будет.
Буду вам очень признателен если вы найдете эту анимацию.А то за целый день смешивания анимаций которые я знаю и находил ничево недобился путёвого. |
|
05.04.2013, 17:52
|
|
Интересующийся
|
|
Регистрация: 18.03.2013
Сообщений: 13
|
|
|
Сообщение от Vasy
|
|
Буду вам очень признателен если вы найдете эту анимацию.А то за целый день смешивания анимаций которые я знаю и находил ничево недобился путёвого.
|
Нашел эту анимацию. Возможно это не то, что ты искал, так как эта анимация не на скриптах, а на флеше. Но все таки надеюсь, что она тебе поможет и пригодится. Посмотри её в действии здесь: http://www.simpleviewer.net/tiltviewer/examples/flickr/
Вся о ней информация здесь: http://www.simpleviewer.net/tiltviewer/support/ |
|
05.04.2013, 19:15
|
|
Аспирант
|
|
Регистрация: 19.03.2013
Сообщений: 84
|
|
<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;
П.С.
Если это то что нужно, то в я сделаю нормально сегодня вечером. Щас на работе нету времени. |
|
05.04.2013, 22:12
|
|
Профессор
|
|
Регистрация: 09.02.2013
Сообщений: 165
|
|
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);
}
Последний раз редактировалось Vasy, 05.04.2013 в 22:23.
|
|
05.04.2013, 22:15
|
|
Профессор
|
|
Регистрация: 09.02.2013
Сообщений: 165
|
|
|
Gosha-K,
Спасибо что нашли,посмотрел почитал,будет тоже наверное полезно.Но сейчас это все реализовано на флеше.А хотят перейти к JavaScript'у
|
|
05.04.2013, 23:40
|
|
Аспирант
|
|
Регистрация: 19.03.2013
Сообщений: 84
|
|
|
Нечто похожее, да. Не так как на kindle, но что-то похожее, можно сделать. Завтра вечером скину source.
|
|
|
|
