Показать сообщение отдельно
  #4 (permalink)  
Старый 24.08.2020, 20:57
Интересующийся
Отправить личное сообщение для sergeantpepper Посмотреть профиль Найти все сообщения от sergeantpepper
 
Регистрация: 03.04.2017
Сообщений: 15

@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 почему-то анимация начинается сначала (или с какой-то альтернативной точки, не пойму). Это лечится?
Ответить с цитированием