Я заканчиваю сайт с большим фоном изображения, растянутым на background-size:cover. Пожалуйста, смотрите здесь: http://knihaoplanu.g6.czПрекрасная анимация больших изображений фоны
Как вы, вероятно, видите, вертикальная анимация не такая гладкая. Размер всех изображений JPEG не превышает 500 КБ, их размеры обычно составляют около 1000х500.
Я использую очень простой код:
function SlideShow() {
$('#wrapper .scroll').bind('click',function(e){
// SETUP
e.preventDefault();
var $anchor = $(this).attr('href');
// ANIMATION
$('#wrapper').stop().animate({
scrollLeft: $($anchor).position().left
}, 1000);
});
Есть ли у вас какие-либо идеи для меня, как сделать анимацию более гладкой? Я нашел несколько подобных тем в Интернете, но ни один из них не дал очень четких ответов (по крайней мере, для меня). Один из них предположил, что проблема связана с background-size:cover, однако без колебаний осталась невозмутимость.
спасибо!
EDIT (решена)
CSS анимации, безусловно, путь - анимация есть ПУТЬ гладкой. Я не хочу перекодировать сайт, поскольку он очень близок к крайнему сроку, поэтому я использовал jQuery Transit plugin, как любезно предложил Маркус.
К сожалению, я все еще не полностью готов. Когда я заменяю свою команду scrollLeft на x (как предложено на сайте плагина), моя горизонтальная компоновка основана на процентном виде расплавов. :)
Можете ли вы посоветовать мне, как использовать scrollLeft И сохранить функциональность Transit?
СПАСИБО!
Вместо этого вы должны искать [анимацию с использованием CSS] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations). – mekwall
Можно ли добиться более плавного эффекта с помощью старого старого jQuery? Я хотел бы использовать анимацию CSS3 как последнее средство, поскольку это будет означать много перекодировки ... –
Какую версию jQuery вы используете? Вы можете дать [транзит] (http://ricostacruz.com/jquery.transit) выстрел. – mekwall