Нарисуйте две линии зеленого цвета в соответствии с параллельными линиями 3d стены по углам на правой стороне. Место пересечения линий желтого цвета является точкой схождения. После этого нам необходимо определить углы задней стены – начертим две красные линии перпендикулярно. Если прочертить луч от точки схождения через пересечение синих линий, то мы получим угол земли правой стороны стены. Таким образом мы обнаружили все стороны нашей комнаты, чего нельзя было сделать до этого, так как частично стены перекрываются объектами картины.

Я не стану объяснять теорему эффекта, так как там примерно говорится, что при перемещении слоев, при параллакс-эффекте, перемещая точку схождения, как в нашем примере, относительная скорость обратно пропорциональна расстоянию от точки схождения до земли. Красные горизонтальные линии пропорциональны ширине к высоте (расстоянию от точки схождения до земли) … и т.п. Короче, мы приводим пример эффекта, а не занимаемся изучением геометрических теорем.

А теперь та часть урока, которая занимает больше всего времени: вырезаем слой и помещаем его часть отдельно, заполняем свободные места, вырезаем еще один слой и так далее. В этом примере я использовал технику CSS спрайтов. Идея состоит в использовании большого изображения, содержащего различные объекты. При помощи CSS показываются только определенные элементы общего плана. Плюс спрайтов заключается в том, что за счет сокращения числа файлов на веб-сайте число запросов к вашему серверу резко уменьшается и выглядит это примерно так, как показано ниже.

Как сделать CSS спрайт? Для начала, нам необходимо определить область отдельного объекта, то есть узнать длины его сторон. В нашем случае – это 205х128 px. Так же нам необходимо определить позицию спрайта, относительно общего фона. Для этого замеряем длины: по оси X и по Y до крайней верхней точки нашего объекта – 23×120 px. Заранее хочется уточнить, что значения длин 23×120 px в коде html будут отрицательными. Таким образом код нашего первого спрайта будет выглядеть примерно так:

HTML – код

<div style="background-image: url(’meninas-sprites.png’); width: 205px; height: 128px; background-position: -23px -120px"></div>

Современные браузеры поддерживают сложные эффекты и позволяют всем тегам дочерних меток изменяться, вызванными наведением на родительский тег. Давайте взглянем на следующий код:

<span class="removed_link">
<img src=”something.jpg” mce_src=”something.jpg” />Текст
<span>И текст побольше</span></span>

CSS – код

a img {position: absolute; top: 500px; left: 300px;}
a:hover img {top: 400px;}
a:hover span {font-weight: bold;}

В примере, передвигая указатель мыши на элемент <a>, изображение немного смещается, так как шрифт в <span> выделен жирным. Как видите, можно создать таким образом довольно сложные эффекты путем изменения свойств различных элементов внутри тега, которые вызываются при наведении.

Как же двигается картина в зависимости от позиции мыши?

Есть 80 вертикальных элементов наведения: 5х455 px каждая, таким образом, охватывается вся эффективная площадь. Каждый из них содержит внутренние элементы, которые определяют положение каждого слоя, фоновое изображение и фоновый рисунок стороны. При наведении картина не активна, все внутренние элементы с изображениями скрываются display: none.

Вы не можете изменить размер CSS спрайтов, но вы можете изменить размер элементов <img>, назначая ширину и высоту приоритетного изображения.

Исходный код.

Некоторые люди спрашивали, какой PHP-сценарий используется для создания HTML? Я считаю, это не очень ценной информацией, но все же поделюсь ей.