Кен Бернс с CSS 3 - Как это может быть сложно

Работа с CSS3 Я не вижу причин, по которым эффект Кена Бернса, основанный на CSS, не будет работать. Моя первая попытка заключалась в использовании Jquery для добавления нового класса к фоновому изображению.

.flare1 {
    background-position:-50.1px -50.1px !important;
    -webkit-transition: all 5s ease-in-out;
}
function gallery() {
    $('.cornerimg').addClass('flare1');
}

Это сработало, но ужасно дергано. Поэтому я рассматриваю другой подход. Как было бы, если бы изображения были установлены с классовой анимацией с самого начала. Я не знаком с анимацией CSS3, только с переходами, однако цель состоит в том, чтобы применить постоянный класс к серии изображений, которые заставляли их постоянно плавно гореть.

Я подготовил прекрасную испытательную площадку для тех, кто хочет попробовать. http://jsfiddle.net/gxUhH/10/

Все настроено на основе моего исходного кода.

Любые идеи?

Чудесный

РЕДАКТИРОВАТЬ --

Ну, ребята, я нашел это, которое кажется очень гладким. Чего я не могу понять, так это того, что в нем по-другому. Вместо этого они используют функцию перевода в веб-ките, но когда я попробовал, она просто подпрыгнула. Посмотри. http://thing13.net/2010/02/css3-ken-burns-effect-2/


jquery css css-transitions effects
person RIK    schedule 23.06.2011    source источник
comment
Я запутался ... эффект Кена Бернса относится к масштабированию и панорамированию.   -  person Michael Mior    schedule 23.06.2011
comment
Взгляните на эту реализацию слайд-шоу на чистом css3 с использованием панорамирования и масштабирования: css3slideshow.remabledesigns.com   -  person Th 00 mÄ s    schedule 28.06.2013

Ответы (4)


arrow_upward
3
arrow_downward

Ваше движение дергается, потому что вы можете перемещать фон только минимум на 1 пиксель за раз. Вы можете проверить это, установив background-position на 10 пикселей и время перехода на 10s linear, и вы увидите, что раз в секунду изображение смещается ровно на один пиксель.

Один пиксель может показаться не таким уж большим, но когда вы двигаетесь медленно, это довольно заметно.

Мое решение состояло бы в том, чтобы перемещать изображение быстрее. Не менее 20 пикселей в секунду будет минимальной скоростью для плавного движения.

К сожалению, пока браузеры не реализуют аппаратное ускорение, вы, вероятно, не получите субпиксельную передискретизацию фоновых изображений в реальном времени.

person hughes    schedule 23.06.2011
comment
Там он выглядит более плавным, потому что они перемещаются более чем на 200 пикселей за 4 секунды или примерно на 50 пикселей в секунду. Вы заметите, что даже в их примере в конце переходного перехода он становится скачкообразным, потому что замедляется до ‹ 20 пикселей в секунду. - person hughes; 23.06.2011
comment
На самом деле, похоже, что они также скрывают дрожь, изменяя размер изображения при его движении. Это может создать иллюзию более плавного движения, но опять же размер изображения не будет изменяться с шагом менее одного пикселя. - person hughes; 23.06.2011
comment
Не спрашивайте меня как, но, кажется, я сделал это jsfiddle.net/gxUhH/47. Единственная проблема сейчас заключается в том, что если вы прокручиваете на устройстве с сенсорным экраном, экран становится рывками. Поэтому я думаю, нам нужно приостановить его, пока экран не перестанет прокручиваться. Любые идеи. я опубликую новый вопрос - person RIK; 24.06.2011

arrow_upward
0
arrow_downward

Вы можете сделать что-то подобное для своего CSS. (Настроить по мере необходимости)

#gallery .imageitem {
    width:680px;
    height:380px;
    overflow:hidden;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
.flare1 {
    -moz-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    -moz-animation-name: slide;
    -webkit-animation-name: slide;  
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

@-moz-keyframes slide {
  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}

@-webkit-keyframes slide {

  from {
    background-position: 0px;
  }

  to {
    background-position: -100px;
  }
}
.cornerimg {
    width:680px;
    height:380px;
}

http://jsfiddle.net/gxUhH/23/

person tomoguisuru    schedule 23.06.2011
comment
Я только что попробовал это на медленной скорости и направлении, и, к сожалению, это так же рывками. Хотя я нашел этот. Он очень гладкий, но я не могу понять, чем он отличается. thing13.net/2010/02/css3-ken-burns-effect -2 Любые идеи. - person RIK; 23.06.2011
comment
Вы можете использовать проценты следующим образом, чтобы сделать анимацию более плавной: 0% { left: 0px; верх: 0px; } 39% { слева: 50 пикселей; верх: 50 пикселей; } 78% { осталось: 100 пикселей; верх: 100 пикселей; } 100% { слева: 150 пикселей; верх: 150 пикселей; } - person tomoguisuru; 24.06.2011

arrow_upward
0
arrow_downward

Я попытался быстро взломать код из protofunc, который использует плагин jQuery backgroundPosition. Плагин позволяет вам контролировать положение фона, например:

$(this).animate({'background-position': '500px 150px'})

Я поместил гигантский JPG в качестве фонового изображения на маленький элемент div. Затем анимация может быть запущена щелчком или сложена с помощью событий обратного вызова, и все обычные вещи, которые может делать jQuery. И он работает очень гладко в Chrome на моей машине.

После повторного прочтения вашего вопроса он не использует CSS3... так что не очень полезный ответ! :П

person Tak    schedule 23.06.2011
comment
Я только что попробовал это на медленной скорости и направлении, и, к сожалению, это так же рывками. Хотя я нашел этот. Он очень гладкий, но я не могу понять, чем он отличается. thing13.net/2010/02/css3-ken-burns-effect -2 Любые идеи. - person RIK; 23.06.2011
comment
Глядя на документацию Mozilla, кажется, что анимация ключевых кадров иногда пропускает кадры анимации, чтобы не загружать ресурсы ЦП. Поскольку переходы CSS3 являются экспериментальными (и широко не поддерживаются), мне интересно, не страдают ли они таким же пропуском кадров - person Tak; 23.06.2011
comment
. Кажется, что совсем нет. Но они по-прежнему основаны на линейной анимации 1px, что раздражает. Это не проблема, что они не поддерживаются широко. У нас уже есть функция JQuery, созданная специально, но с CSS3, который значительно быстрее и эффективнее, я хотел по умолчанию использовать JQuery, только если CSS3 не поддерживался. Мы добились прогресса в Fiddle, но по-прежнему не можем избавиться от рывков, если только не нацеливаемся на 20 пикселей в секунду. - person RIK; 23.06.2011

arrow_upward
0
arrow_downward

Ребята, не спрашивайте меня как, но с помощью анимации по ключевым кадрам теперь все гладко. http://jsfiddle.net/gxUhH/47/

Только одна проблема. Когда кто-то прокручивает на устройстве с сенсорным экраном, страница становится прерывистой. Я думаю, нам нужно приостановить его при прокрутке, а затем снова воспроизвести после завершения прокрутки.

Любые идеи?

person RIK    schedule 24.06.2011