Кен Бърнс с 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/

Всичко е настроено въз основа на първоначалния ми код.

Някакви идеи?

чудесно

РЕДАКТИРАНЕ --

Е, момчета, намерих това, което изглежда много гладко. Това, което не виждам, е какво в него е различно. Вместо това те използват функцията за превод в web-kit, но когато се опитах, тя просто скочи. Погледни. 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 на 10px и времето за преход на 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% { ляво: 50px; отгоре: 50px; } 78% { ляво: 100px; отгоре: 100px; } 100% { ляво: 150px; отгоре: 150px; } - person tomoguisuru; 24.06.2011

arrow_upward
0
arrow_downward

Опитах бърз хак с кода от protofunc, който използва backgroundPosition jQuery плъгин. Плъгинът ви позволява да контролирате позицията на фона като:

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

Сложих гигантски JPG като фоново изображение на малък div. Тогава анимациите могат да бъдат задействани чрез щракване или подредени чрез събития за обратно извикване и всички обичайни неща, които jQuery може да направи. И работи много гладко в Chrome на моята машина.

След като прочетох отново въпроса ви, той обаче не използва CSS3... така че отговорът не е много полезен! :P

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, но все още не можем да помогнем на резките, освен ако не се стремим към 20px в секунда. - person RIK; 23.06.2011

arrow_upward
0
arrow_downward

Е, момчета, не ме питайте как, но чрез анимация на ключови кадри вече е гладко. http://jsfiddle.net/gxUhH/47/

Само един проблем обаче. Когато човек превърта на устройство със сензорен екран, страницата става накъсана. Мисля, че трябва да го поставим на пауза при превъртане и след това да възпроизведем отново, след като превъртането приключи.

Някакви идеи?

person RIK    schedule 24.06.2011