Эффект параллакса в астрономии, фотографии, веб-дизайне

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

Что такое параллакс?

Параллакс (греч. παραλλάξ - "чередование", "смена чего-либо") - так называется изменение видимого положения предмета в отношении удаленного фона в зависимости от расположения наблюдателя.

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

Понятие в астрономии

Здесь различаются следующие разновидности героя нашего повествования:

• Геоцентрический (суточный) - разница направлений на один и тот же астрономический объект из определенной точки на поверхности нашей планеты (топоцентрический вектор) и из центра ее масс (геоцентрический вектор).
• Годичный - изменения направлений на астрономический объект, связанные с вращением вокруг Солнца нашей Земли.
• Вековой - изменение видимого положения астрономического объекта на небесной сфере из-за комбинации собственных его вращений и движения Солнечной системы в пределах галактики.

В фотографии

Рассмотрим эффект параллакса в фотоискусстве. Здесь также он встречается нескольких типов:

• Параллакс видоискателя - изображение, что видит фотограф в незеркальном оптическом видоискателе, не совпадает с тем, что получится на самой фотографии. Часто это проявляется при съемке близко расположенных предметов.
• Параллакс дальномера - угол, под которым заметен искомый объект во время наводки на резкость (производится с помощью оптического дальномера).
• Бинокулярный (стереоскопический) параллакс - угол, под которым фотографируют предмет стереоскопическим фотоустройством. Схож с бинокулярным зрением.
• Временной параллакс - искажение формы предмета данным эффектом, проявляющимся при съемке фотоаппаратом, имеющим шторный затвор. Заметно при запечатлении чего-то быстро движущегося. Если объект держит путь в сторону щели затвора, то он будет растянут, в ином случае - наоборот.

В веб-дизайне

Здесь эффект параллакса (по-иному - параллакс-скроллинг) - специальный прием, при котором фон в перспективе движется медленнее главного плана. Последним выступает текст, изображение.

Как сделать эффект параллакса? Создается 3D-пространство при помощи нескольких фонов, которые при их прокручивании начинают двигаться с разной скоростью. Смотрится достаточно зрелищно и впечатляюще.

Рассмотрим программы и приложения, в которых можно создать эффект параллакса:

• jQuery - это плагин, который привязывает параллакс-скроллинг к вращению пользователем колесика мышки.
• jParallax - может превратить элементы веб-страницы в абсолютно позиционированные слои, которые будут реагировать на расположение курсора.
• Scrolldeck - удобный плагин, который позволяет добиться такого эффекта.

Особенности в веб-дизайне

Обратим ваше внимание на то, что эффект параллакса не является универсальным украшением для всех сайтов. Первым ресурсом, на котором его можно было лицезреть, был сайт корпорации Nike. И до сих пор он довольно хорош для интернет-магазинов, помогая оживлять показ ассортимента, движение по категориям. Но в разумных пределах - пользователю все же хочется быстрее посмотреть и выбрать что ему нужно, поэтому насыщенность эффектом очень скоро начнет его раздражать.

Спорным будет его использование для деловых, информационных ресурсов. С одной стороны, параллакс позволяет как-то разбить сплошной текст на блоки, с другой, выглядит малость несерьезно. Идеальным будет его применение для детских, развлекательных, познавательных ресурсов, сайтов-биографий, он поможет придать узнаваемость, своеобразность, привлечет внимание.

Недостатки параллакс-скроллинга и пути их устранения

Параллакс - достаточно симпатичный и стильный эффект. Однако он заметно утяжеляет страницу из-за использования javascript/jQuery: им приходится производить ряд сложных вычислений, чтобы контролировать положение каждого пикселя. Это довольно ощутимо затормаживает скорость загрузки сайта. Могут также возникнуть проблемы с кроссплатформенностью и кроссбраузерностью.

Выход будет в том, чтобы особо не перезагружать сайт элементами с эффектом параллакса, достаточно 1-2 на одной странице. Еще один способ - использование CSS3. Он помогает создать очень похожий эффект, который при этом менее ресурсозатратный. Но имеет свои минусы: только с его помощью параллакс-скроллинга достичь невозможно. Кроме того, CSS3 поддерживают не все современные браузеры.

Примеры в веб-дизайне

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

• Портфолио из фотографий, реагирующее на движения мышкой.
• Эффект свитка - чтобы открыть объявление, статью, нужно потянуть за стрелочку на изображении.
• При прокрутке списка фон движется медленнее текста.
• Какие-то объекты (облака, игрушки, фигурки, предметы одежды) движутся по странице.
• Реагируя на ваши движения мышкой, раздвигаются слои фона.
• Одна часть страницы сайта чувствительна к расположению курсора, а вторая - неподвижна.
• Двигая мышкой, вы можете запустить в космос ракету, в путь машину, человечка и т.д. Достигается эффект тем, что фон движется медленно, а основной объект - быстро.

В интерфейсе различных ОС тоже применяется такая иллюзия. В частности для iOS 7 эффект параллакса уже был характерен.

Таким образом, объект нашего рассказа актуален во многих областях. В последнее время он прочно обосновался в веб-дизайне, что, однако, не гарантирует его универсальной прелести для всех сайтов.