Итак, в прошлом году вы могли вспомнить, как я проводил некоторые эксперименты с использованием процентов для позиционирования вашего фонового изображения в CSS . Короткая версия: проценты немного нелогичны, но довольно мощны — если бы не было сосания IE6-7, всегда тщательно их просчитывая.
В оригинальном посте мы придерживались в основном более предсказуемого и часто используемого процента — от 0 до 100%. Сегодня я подумал, что мы могли бы взглянуть на некоторые интересные вещи, которые произойдут, если начать проверять эти цифры.
Теперь, чтобы было ясно, это в основном «теоретический CSS» в стиле Stu Nicholls, и, вероятно, это не тот материал, который вы будете находить полезным каждый день. Надеюсь, это будет, по крайней мере , полезно, чтобы помочь вам лучше понять тонкости взаимодействия процентов с изображениями. Если повезет, это может даже пригодиться в какой-то момент в будущем.
Давайте посмотрим на начальный пример, беря фоновое изображение с позицией 150% 0% Ноль — легкая задача, и он, очевидно, поместит графику на верхний край поля.
Для горизонтального положения браузер сначала найдет место на 50% справа от вашего DIV. Затем он найдет точку на 50% с правой стороны вашего изображения и выровняет эти две точки. Это на самом деле будет иметь эффект перемещения вашего изображения обратно (относительно исходной точки, которую вы нашли).
Это означает, что если изображение маленькое, это смещение также будет небольшим, и изображение останется в основном, если не будет полностью скрыто за правым краем вашего DIV.
Если изображение и DIV имеют одинаковый размер, эти смещения будут компенсировать друг друга, и изображение будет расположено в горизонтальном центре его DIV.
Тем не менее, если изображение больше, чем оно содержит DIV, это смещение фактически начнет двигаться влево влево содержащего DIV. Странно, но это имеет смысл, если вы думаете об этом.
Отрицательные проценты работают так же, только слева от экрана.
Однако, когда вы устанавливаете фон в горизонтальное положение, начинают происходить действительно интересные вещи ( background-repeat: repeat-x; Эффект мозаичного изображения гарантирует, что ваше изображение всегда будет видимым, а установка большого процента означает, что даже небольшое изменение размера вашего браузера приведет к значительному изменению положения фонового изображения. Например, если ваше положение фона установлено на -500%, при увеличении вашего браузера на 50 пикселов фоновое изображение будет перемещено на 250 пикселей влево.
Вместо того, чтобы объяснять это, проще всего продемонстрировать это на этом небольшом примере, который я собрал вместе для запуска книги «Искусство и наука о JavaScript ».
Запустите браузер с небольшого размера, возьмите угол и, как только вы начнете изменять размер приложения вверх и вниз, вы увидите анимированный эффект «диорамы», происходящий вокруг лимузина. Каждый из «сценических слоев» (т.е. городской пейзаж, фоновая толпа и толпа на переднем плане) получает больший отрицательный процент, чем предыдущий (-100%, -250% и -550% соответственно).
Лимузин получает положительный процент в размере 150%, что приводит к его выходу из правой ступени при изменении размера.
Что-то вроде гипнотизирующих братьев Марио, не так ли?
Так что же, «изменить размер анимации» — будущее сети?
Очевидно, нет, но он предлагает несколько практических возможностей. Я мог бы представить несколько хороших идей с заголовками сайтов, где несколько частично прозрачных слоев были наложены и размещены с большим процентом. Изменение размера браузера изменило бы взаимодействие этих слоев, возможно, заставив заголовок выглядеть кардинально другим при разных разрешениях браузера. В качестве аналога, представьте себе большие изменения, которые маленький поворот может создать в калейдоскопе.
Джеймс также размышлял об использовании хитрости в JavaScript-анимации.
Даже если ничего особенно практичного из этого не выйдет, было очень весело поиграться, и я думаю, что я отлично понимаю, как работают проценты сейчас. Надеюсь, это прояснит ситуацию и для некоторых других.
* Примечание: Linux не выполняет рендеринг браузера при изменении размера до тех пор, пока вы не отпустите край окна, поэтому вы не можете увидеть этот эффект анимации на Linux-боксе.
** Примечание. Очевидно, что большинство дистрибутивов Linux демонстрируют хорошую анимацию. Должно быть, это настройка в моей настройке Gnome.