@MallSerg
Сообщение от MallSerg
|
Такие анимации гораздо лучше делать через CSS анимации. А со стороны JS просто изменять классы у элемента страницы для ускорения или замедления.
|
Попробовал реализовать через бесконечную css-анимацию:
http://proudly.ru/febotelecom/
В Css:
@mixin infinite-rotation($speed: $animation-speed) {
-webkit-animation-name: rotation180;
-webkit-animation-duration: $speed;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotation;
-moz-animation-duration: $speed;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-o-animation-name: rotation180;
-o-animation-duration: $speed;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-name: rotation180;
animation-duration: $speed;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-webkit-keyframes rotation180 { to { -webkit-transform: rotate(180deg); }}
@-moz-keyframes rotation180 { to { -moz-transform: rotate(180deg); }}
@-ms-keyframes rotation180 { to { -ms-transform: rotate(180deg); }}
@-o-keyframes rotation360 { to { -o-transform: rotate(180deg); }}
@keyframes rotation180 { to { transform: rotate(180deg); }}
@mixin animation-duration($speed: $animation-speed) {
-webkit-animation-duration: $speed;
-moz-animation-duration: $speed;
-o-animation-duration: $speed;
animation-duration: $speed;
}
#figure1 {
position: absolute;
top: -18vw;
right: -30.8vw;
width: 58.343265792610250297973778307509vw;
height: 59.356376638855780691299165673421vw;
display: block;
background: url('../images/_figure1.svg') no-repeat;
background-size: contain;
@include infinite-rotation(20000ms);
&.accelerated {
@include animation-duration(5000ms);
}
}
Далее в скрипте при прокрутке просто навешивается класс
accelerated , и по таймауту убирается при остановке прокрутки. Но почему-то при изменении свойства
animation-duration почему-то анимация начинается сначала (или с какой-то альтернативной точки, не пойму). Это лечится?