http://proudly.ru/febotelecom/#bl-services Есть блок с геометрическими фигурами, они вращаются. Задача сделать ускорение вращения при скроллинге вверх или вниз. В целом, в примере это уже работает, но ощущается "тяжесть" анимации + глюки на apple устройствах.
- Сейчас вращение реализовано через setInterval и модификацию свойства transform rotate, соответственно при скролле это значение также меняется.
jQuery.fn.rotate = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)',
'transform' : 'rotate('+ degrees +'deg)',
'zoom' : 1});
return $(this);
};
var rotation = 0;
var rotationLock = false;
var rotationTid;
setInterval(function() {
if (!rotationLock || !__isMobile) {
rotation += 0.5;
$('#figure1').rotate(rotation);
$('#figure2').rotate(rotation);
$('#figure3').rotate(rotation);
}
}, 50);
scrollCallbacks.push(function() {
rotation += 1;
$('#figure1').rotate(rotation);
$('#figure2').rotate(rotation);
$('#figure3').rotate(rotation);
rotationLock = true;
clearTimeout(rotationTid);
rotationTid = setTimeout(function() {
rotationLock = false;
}, 100);
});
- Также была попытка реализовать это через css анимацию, а затем при скролле менять animation-duration, но эта попытка вышла более глючной.
animation-name: rotation180;
animation-duration: $speed;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes rotation180 { to { transform: rotate(180deg); }}
Подскажите, есть ли у кого-то реальный опыт в таких интерактивных анимациях? Очень хочется всё оптимизировать до ощущения невероятности)