На прошлой неделе вы могли заметить, что мы тестируем новый экспериментальный экранный гаджет в нашем разделе книг — книгу на основе JavaScript, которая позволяет пролистывать книгу, чтобы быстро понять ее внешний вид.
Хотя я мог бы поговорить об этом чуть позже, я подумал, что поделюсь некоторыми своими исследованиями фоновых изображений CSS.
В наши дни, как и во многих анимациях на основе CSS / JS, я использовал « спрайты фонового изображения » — большое фоновое изображение, содержащее все кадры, а background-position используется для управления тем, какой кадр (или ячейка анимации) отображается. Каждый щелчок перемещает фоновую позицию ровно на один кадр вниз. Основным преимуществом использования одного изображения является то, что вы можете гарантировать, что все кадры будут кэшированы в момент готовности анимации.
Есть три жизнеспособных метода, доступных для управления background-positionне разрешено смешивать и сопоставлять их (то есть background-position: top 50%;
1) Ключевые слова: т.е. background-position: top right
Ключевые слова, вероятно, являются наиболее часто используемым методом, потому что их действительно легко понять, и они работают абсолютно надежно во всех браузерах. Вам даже не пришлось беспокоиться об их заказе — «верхний правый» работает так же, как и «правый верхний».
Основным недостатком позиционирования ключевых слов является их отсутствие детализации. Три вертикали (сверху, по центру, снизу) и три по горизонтали (слева, по центру и справа) дают абсолютный максимум девяти позиций кадра. Там не может быть « верхний центральный » или « правый и немного ». Кроме того, ключевые слова не могут быть легко обработаны математически, как и другие два числовых метода позиционирования.
2) Пиксели: т.е. background-position: 0px 0px
Пиксельное позиционирование в настоящее время является, пожалуй, самым полезным из доступных методов. Во-первых, концепция проста для понимания. Как только мы узнаем, что мы всегда измеряем в верхнем левом углу как контейнера, так и изображения, нетрудно точно предсказать, где графическое изображение появится до того, как оно отобразится.
Пиксели также прекрасно поддаются математической обработке. Фактически, если у вас есть циклическая анимация (например, книжная анимация), вы можете позволить своему графическому элементу спрайта и просто перемещать фон на одну «высоту кадра» каждый цикл. Когда анимация достигает последнего кадра, мозаика автоматически представляет первый кадр, и цикл автоматически начинается снова.
3) Проценты: то есть background-position: 80% 50%
Проценты в теории велики, но, несмотря на то, что есть некоторые очень хорошие объяснения их тонкостей, у меня складывается впечатление, что они (проценты) не совсем понятны. Я конечно не сделал.
На первый взгляд, проценты имеют многообещающие результаты, поскольку ими легко манипулировать с помощью математики и не имеют практических ограничений на количество позиций (т. Е. Кадров), которые они могут отображать. Идея, которая действительно заинтересовала меня в их использовании, заключалась в том, что они позволяли вам изменять размеры ваших изображений без необходимости переписывать все настройки позиционирования в пикселях — 20% — это 20% независимо от размеров вашего изображения. Теоретически вы должны иметь возможность дать вашему сценарию изображение, указать, сколько у него кадров, и все остальное сработает.
В теории все это звучало великолепно, но некоторые быстрые испытания смутили меня. В то время как 0%, 50% и 100% дали мне эквиваленты «сверху», «по центру» и «справа», процентные доли, такие как 37%, 61% и 88%, выглядели сумасшедшими.
Ключ к пониманию процента в фоновых изображениях — это понимание того, что в отличие от настроек пикселя, его опорная точка перемещается. Любой процент относится к процентному положению на графике И на содержащем объекте.
Таким образом, когда мы устанавливаем фоновое изображение на «10% 10%», мы выравниваем точку на нашем графике на 10% в поперечном и нижнем направлениях от ее верхнего левого угла с точкой на нашем HTML-элементе на 10% в поперечном и нижнем левом верхнем углу. угол.
Я должен признать, что это сначала бросило меня в тупик, но я нарисовал эту диаграмму, чтобы помочь объяснить это себе.
На практике это означает, что если размер вашей графики совпадает с размером вашего HTML-элемента, изменение процентного содержания не будет иметь никакого значения. «0%» будет идентичным «73,5%» и 100%.
Даже когда вы понимаете общую концепцию, она все же не особенно интуитивна. Что произойдет, если вы дадите 150% X-позиции? Большинству из нас труднее представить результат.
Как быть, если у вас есть четырехкадровый вертикальный спрайт? Какими будут четыре Y-позиции?
Я начал догадываться, что 25% и 75% должны быть в миксе, но, как вы можете видеть в этом тестовом примере , четыре вертикальных положения кадра установлены на трети — 0%, 33,333%, 66,666% и 100%.
Хорошо, .. так что это немного странно, но как только вы обдумаете это, это должно быть действительно полезно, верно?
В теории да, но реальность не столь обнадеживающая. Честно говоря, мне так надоело нытье по поводу IE, но это действительно дерьмо.
Насколько я могу судить, и IE6, и IE7 (предположительно более ранние версии) имеют какую-то ошибку округления, которая эффективно убивает использование процентов в этом типе работы на основе спрайтов. Простые проценты, такие как 0%, 50% и 100%, полностью надежны, но в конечном итоге не более полезны, чем верх / центр / низ.
Более сложные проценты кажутся лотереей. Ошибка невелика, но ее более чем достаточно, чтобы испортить анимацию, вытеснив ее из центра — зацикленные анимации будут умножать эту ошибку при каждом проходе. Попытка предсказать ошибку и компенсировать ее в IE также оказалась невозможной, и я не могу представить никакого другого решения, кроме как придерживаться позиционирования в пикселях.
Достаточно сказать, очень неприятные вещи. Вставьте «смайлик закатывая глаза» здесь.