Кен Бернс с CSS 3 - как трудно это может быть - PullRequest
Новая
       17

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

4 голосов
/ 23 июня 2011

Работа с 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/

Ответы [ 4 ]

3 голосов
/ 23 июня 2011

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

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

Мое решение - переместить изображение быстрее. Минимум 20 пикселей в секунду - это минимальная скорость для плавного движения.

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

0 голосов
/ 24 июня 2011

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

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

Есть идеи?

0 голосов
/ 23 июня 2011

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

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

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

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

0 голосов
/ 23 июня 2011

Вы можете сделать что-то подобное для своего 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/

...