Анімація на js

1 Тема від Faraon 29.03.2015 16:26:17

Faraon
Користувач
Поза форумом

Дата реєстрації: 28.05.2013
Повідомлень: 697

: 59

Тема: Анімація на js

Привіт всім. Можливо хтось з вас знає посилання на різні кльові штуки які можна мутити на js.
Я найшов кілька простих анімацій з переміщенням обєктів на js? типу цього:
http://learn.javascript.ru/js-animation
але це не те що потрібно. Де можна знайти приклади анімації на js більшої сложності:
наприклад таке:
https://dl.dropboxusercontent.com/u/114 … demo3.html
ну і все подібне цьому... Буду дуже вдячний за лінки

2 Відповідь від VTrim 29.03.2015 17:23:56 Востаннє редагувалося VTrim (29.03.2015 17:26:59)

VTrim
=)
Поза форумом

Дата реєстрації: 07.09.2014
Повідомлень: 3 333

Репутація

: 2304

Re: Анімація на js

Гугліть все про JS фреймворк Three.js

Подякували: Faraon1

3 Відповідь від 0xDADA11C7 29.03.2015 17:53:55

0xDADA11C7
Gott mit uns
Поза форумом

Звідки: Дніпрожидівськ
Дата реєстрації: 14.02.2014
Повідомлень: 5 707

Репутація

: 5777

Re: Анімація на js

гугліть d3 three canvas webgl, але я не впевнений що Faraon хочаб сінуси розуміє, тому вся ця гафіка обмежиться яскравим блиманням і ехвектним виповзанням готового малюнку, якого той використає без вказання авторства. Бібліотеки це засоби, а комп’ютерна графіка це матан.

Подякували: Faraon1

4 Відповідь від VTrim 30.03.2015 13:56:51 Востаннє редагувалося VTrim (30.03.2015 13:58:32)

VTrim
=)
Поза форумом

Дата реєстрації: 07.09.2014
Повідомлень: 3 333

Репутація

: 2304

Re: Анімація на js

Анімація в CSS3

<style type="text/css">
#holder {
  margin:50px auto;
  -webkit-perspective:600px;
  -moz-perspective:600px;
  text-indent: 0px;
}

.box {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  -webkit-animation: spin 20s infinite linear;
  -moz-animation: spin 20s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.box div {
  position: absolute;
  height: 200px;
  width: 200px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); 
  -webkit-animation:rotate 15s infinite linear;
  -moz-animation:rotate 15s infinite linear;
}

.box div img {width:200px; height:200px;
  border-radius:200px;
  -webkit-animation:rot 10s infinite linear;
  -moz-animation:rot 10s infinite linear;
  padding: 0;
}

.box div.side1 {
  background:rgba( 213, 62, 7, 0.8);
  -webkit-transform:translateZ(100px);
  -moz-transform:translateZ(100px);
}
.box div.side2 {
  background:rgba( 127, 255, 212, 0.8);
  -webkit-transform:rotateY(90deg) translateZ(100px);
  -moz-transform:rotateY(90deg) translateZ(100px);
}
.box div.side3 {
  background:rgba( 255, 219, 88, 0.8);
  -webkit-transform:rotateY(180deg) translateZ(100px);
  -moz-transform:rotateY(180deg) translateZ(100px);
}
.box div.side4 {
  background:rgba( 153, 17, 153, 0.8);
  -webkit-transform:rotateY(-90deg) translateZ(100px);
  -moz-transform:rotateY(-90deg) translateZ(100px);
}
.box div.side5 {
  background:rgba( 0, 71, 171, 0.8);
  -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
  -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.box div.side6  {
  background:rgba( 0, 171, 147, 0.8);
  -webkit-transform:rotateX(90deg) translateZ(100px);
  -moz-transform:rotateX(90deg) translateZ(100px);
}

@-moz-keyframes spin {
  0% {-moz-transform: rotateX(0deg) rotateY(0deg);}
  100% {-moz-transform: rotateX(1080deg) rotateY(360deg);}
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotateX(0deg) rotateY(0deg);}
  100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);}
}
@-moz-keyframes rot {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}

</style>

<div id="holder">
<div class="box">
<div class="side1"><img src="http://replace.org.ua/style/Replace/img/logo-java.png" /></div>
<div class="side2"><img src="http://replace.org.ua/style/Replace/img/logo-mysql.png" /></div>
<div class="side3"><img src="http://replace.org.ua/style/Replace/img/logo-dot-net.png" /></div>
<div class="side4"><img src="http://replace.org.ua/style/Replace/img/logo-php.png" /></div>
<div class="side5"><img src="http://replace.org.ua/style/Replace/img/html5-logo.png" /></div>
<div class="side6"><img src="http://replace.org.ua/style/Replace/img/logo-android.png" /></div>
</div>
</div>

Подякували: Faraon1