Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Анимация объекта (https://javascript.ru/forum/dom-window/39420-animaciya-obekta.html)

Tit6ka 29.06.2013 12:05
Анимация объекта
 
Есть <div class="logo"></div>
Лого - это изображение шестерни.
Мне нужно , чтобы она была анимированая , то есть - делала обороты , и чтобы без остановки.
Помогите с кодом !

dmitriymar 29.06.2013 12:08
Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Tit6ka 29.06.2013 12:10
Да , я знаю только html и css , а js пытаюсь как то изучать , но как то не продвигается )

danik.js 29.06.2013 13:31
Цитата:
Сообщение от Tit6ka
Да , я знаю только html и css
Знал бы css, сделал бы через CSS3 Animations

melky 29.06.2013 14:23
Цитата:
Сообщение от Tit6ka (Сообщение 259133)
Есть <div class="logo"></div>
Лого - это изображение шестерни.
Мне нужно , чтобы она была анимированая , то есть - делала обороты , и чтобы без остановки.
Помогите с кодом !
На CSS3 Animations
http://jsbin.com/uwapag/1

а если надо для IE - используйте GSAP. Это лучший на текущий момент анимационный движок.

Deff 29.06.2013 20:57
Цитата:
Сообщение от Tit6ka
Да , я знаю только html и css , а js пытаюсь как то изучать , но как то не продвигается
Тогда проще вставить gif анимацией http://qps.ru/WINJe

<style type="text/css">
#logo-img {
  position:absolute;
  margin-top:20px;
  margin-left:100px;
}
</style>
<img id="logo-img" src="http://s4.forumimage.ru/uploads/20100331/127002873894068488.gif" height="120">

Deff 29.06.2013 21:08
Цитата:
Сообщение от melky
На CSS3 Animations
http://jsbin.com/uwapag/1
:p А такое - сможет?
<center><iframe width="640" height="360" src="http://www.youtube.com/embed/WYcqJ5HdxA4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></center>

Magneto 30.06.2013 02:06
Цитата:
Сообщение от Deff
Тогда проще вставить gif анимацией http://qps.ru/WINJe
Это самый простой и оптимальный способ. И CSS3 очень круто, я стараюсь использовать его возможности впервую очередь.

Но иногда нужно анимировать и PNG - например: https://dl.dropboxusercontent.com/u/...fox/index.html.

Romaboy 05.07.2013 13:18 
var elem = document.getElementById('elem');
var deg = 0;
var timer = setInterval(animation,10);
function animation() {
elem.style.cssText = '-moz-transform: rotate('+deg+'deg);\
	-ms-transform: rotate('+deg+'deg);\
	-webkit-transform: rotate('+deg+'deg);\
	-o-transform: rotate('+deg+'deg);\
	transform: rotate('+deg+'deg);\
	left:100px;top:100px;';

    if(deg == 360) deg = 0;
    deg+=0.5;
}

melky 05.07.2013 15:33
Romaboy, а для Internet Explorer без поддержки transform?


Часовой пояс GMT +3, время: 20:28.