Плохая CSS-анимация фона

Итак, сегодня я работаю над простой страницей запуска приложения, над которым работаю.

Я хотел добавить движущийся фон (в стиле параллакса), используя CSS-анимацию, как показано здесь
http://css-tricks.com/parallax-background-css3/

Я использовал перемещение фона в конфигурации ключевого кадра с помощью функции анимации webkit.

вот образец

#BigWrapper{
    -webkit-animation-name: MOVE;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-animation-duration: 250s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
     @-webkit-keyframes MOVE {
     from {

     background-position: 5% 5%;

    }
    to {
        background-position: 1300% 600%;
    }
    }

Это дало довольно плохую производительность. фоновое изображение представляет собой png32 с прозрачностью, сжатой до 896 КБ. Я попытался запустить аппаратное ускорение с помощью пустого оператора translate3d, но никаких видимых изменений не произошло.

Я также попытался изменить фоновое положение на translate3d, и он переместил весь div вместе с содержащимся в нем содержимым. я не уверен, как создать этот эффект без ударов по производительности.

вот тестовый сайт www.auroragm.sourceforge.net


animation css css-animations parallax webkit
person Sammy Guergachi    schedule 15.04.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Хотя тестирование с Chrome и Firefox в Windows XP показало хорошую производительность, файлы Tile.png и BlurBG.png кажутся довольно большими. Что касается меня, я бы объединил Tile.png с BlurBG.png в один файл, так как Tile.png не выглядит статичным фоном за движущимся BlurBG.png.

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

person deathlock    schedule 15.04.2012
comment
Спасибо! Думаю, я ожидал плавной работы, но я попробую объединить оба файла и посмотреть, даст ли это какой-либо прирост производительности. Я хочу, чтобы плитки были отдельными, потому что они загружаются быстрее, чем BlurBG, и вы не увидите белую страницу при загрузке сайта в ожидании загрузки BlurBG. Я также использую компрессор png, который уменьшил BlurBG с 5 МБ до 900 КБ, что довольно хорошо. но я проверю PNGoo спасибо! - person Sammy Guergachi; 15.04.2012
comment
Я не сравнивал производительность, но, возможно, вы также захотите проверить узор из углеродного волокна CSS3 от Lea Verou › lea.verou.me/css3patterns/#carbon-fibre :) Если изменить число на 35% (вместо 15%), оно будет похоже на ваш Tile.png, но потребует всего 6 строк кода. . Хотя, к сожалению, он не поддерживается в старых браузерах. - person deathlock; 16.04.2012
comment
Сомневаюсь, что это действительно помогло бы. Я почти уверен, что большая проблема заключается в движущемся изображении, а не в файле Tiles.png, который отображается до того, как движущийся фон начнет двигаться. Я искал более эффективный способ анимации движущегося фона. - person Sammy Guergachi; 18.04.2012
comment
О, извините, вы правы, я имел в виду, что метод шаблона CSS3 - это просто альтернатива для уменьшения довольно большого размера файла Tile.png. - person deathlock; 20.04.2012
comment
Я могу сжать это не очень важно, чтобы помочь мне решить эту проблему, но спасибо - person Sammy Guergachi; 21.04.2012

arrow_upward
1
arrow_downward

Этот сайт работает на удивление хорошо с моей стороны, используя Firefox или Chrome в Linux.

В каком браузере вы тестируете? Возможно, IE плохо реагирует на анимацию большого фонового изображения.

Рассмотрите возможность ограничения анимации фона для определенных браузеров.

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

person Michael Slade    schedule 15.04.2012
comment
Спасибо за отзыв. Я думаю, что ограничение ОС - это то, что я сделаю, очевидно, IE9 и iOS - это те, у кого есть проблема. Я также затемню фон, я тоже подумал, что это слишком много. :) - person Sammy Guergachi; 15.04.2012

arrow_upward
1
arrow_downward

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

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Сделал трюк :)

person Sammy Guergachi    schedule 28.05.2012