Параллакс в веб-дизайне это круто
Как определяют глубину — расстояние от нашего местоположения до объекта? Для этого существует несколько способов, и один из самых распространённых и простых геометрическое явление, как параллакс. Этот чрезвычайно простой принцип используется нашими глазами и мозгом для формирования нашего трёхмерного изображения мира, а астрономы используют его для определения расстояний (или относительных расстояний) от Земли до астрономических объектов.
Ещё один распространённый способ определять расстояния включает в себя отправку волны (звука, света, чего-то ещё), распространяющейся с известной скоростью, которая отражается от объекта и возвращается к нам; время, затраченное на возврат волны — эхо — сообщает нам расстояние до объекта. По этому принципу летучие мыши определяют расстояние до пищи и препятствий, а также работает радар.
Из геометрии прямоугольных треугольников, расстояние D до объекта будет равняться D=(R/2)tan;
Из формулы видно, что когда D меньше, угол, на который линия взгляда на объект отстоит от прямого взгляда, становится больше. Именно этого мы и ожидаем от параллакса.
А когда астрономы хотят измерить самые большие расстояния, какие только можно измерить при помощи параллакса, они сравнивают изображения удалённой звезды, сделанные с разницей в шесть месяцев, чтобы получить максимальное расстояние R на основании того, что Земля в течение года проходит довольно большое расстояние.
На самом деле задать орбиту и три точки и затем обратиться к МК
<Параллакс годичный.vbs>
VbsMsg "Угол АОB - задать три точки"
GroupToPolyline
n1 = LastNmb
CurrObjNmb = n1 ' сделали ее активной
ugol = Polyline.Angle( 1 ) '
VbsMsg "Угол АОB = " & Ugol
Rr=6.378
' вычислем на ней 3 точки - 2-я центре линии
Set A = PolyLine.Pofi (0)
Set O = PolyLine.Pofi (1)
Set B = PolyLine.Pofi (2)
' угол в радианах
ugol_rad = ugol*3.14/180
VbsMsg "ugol_rad = " & ugol_rad
D= Rr/(tan(ugol_rad/2))
VbsMsg "D = " & D
Полученный результат из системы Вектор сохранить в формате А4 (МК 3.1)
В более общем случае, показанном на рис. 4, когда объект находится не прямо перед вами, получается чуть более сложным, как и тригонометрические формулы, но в нём работает тот же самый основной принцип и в итоге его не так уж сложно подсчитать. Ваш мозг проделывает такие подсчёты так быстро (используя технику, которую мы пока ещё не раскрыли), что вы об этом и не подозреваете.
Для достаточно удалённых объектов угол ; оказывается слишком малым для того, чтобы его восприняли ваши глаза и мозг. В этот момент ваше чувство глубины пропадает. Поэтому Луна не кажется расположенной ближе, чем звёзды; они находятся слишком далеко, чтобы ощутить глубину. Также вашего ощущения глубины обычно не хватает, чтобы понять, пройдёт ли самолёт перед или за горой вдалеке. Но это просто ограничение ваших глаз.
Как определить расстояние до более удалённых объектов? Есть два варианта; разработать научный инструмент, способный измерять углы точнее, чем ваш глаз; увеличить R, чтобы сравнивать не вид из глаз, а, например, вид из двух камер, стоящих в нескольких метрах друг от друга, или даже в разных местах континента.. Детали этих техник отличаются, но основной принцип тот же, что показа на рисунке верхний ряд.
На вставке. Пример применение эффекта параллакса к черным дырам,
когда объекты влетают в одном 3D вылетают в другом
(в частности в нашем 3D)
Видимое смещение более близкого объекта на фоне значительно более далеких при перемещении наблюдателя с одного конца некоторой базы на другой ее конец. Если длина базы известна, то параллактический угол позволяет вычислить расстояние до объекта. При фиксированной базе сам параллактический угол служит мерой расстояния до объекта.
При измерении расстояний до объектов Солнечной системы достаточной базой служит размер Земли; при измерении расстояний до звезд - размер земной орбиты. Например, перемещение наблюдателя вследствие вращения Земли вызывает изменение суточного параллакса - угла, под которым со светила виден радиус Земли, проведенный в место наблюдения. Если светило наблюдается на горизонте, то его суточный параллакс принимает максимальное значение и называется горизонтальным параллаксом. Средний горизонтальный параллакс Солнца 8.8", Луны - 57'.
Перемещение Земли по орбите вызывает годичный параллакс (угол, под которым со светила виден радиус земной орбиты, перпендикулярный лучу зрения). У близких звезд он имеет заметное значение, хотя и не превышает 1". В старых книгах параллакс обозначали греческой буквой ; в последние годы чаще используют латинскую букву p. Если угол параллакса (p) мал и выражен в радианах, а длина перпендикулярной к направлению на объект базы составляет B, то расстояние до объекта равно D=B/p. Если параллакс выражен в секундах дуги, то расстояние до объекта D=(1/p) парсек = 206 265 (1/p) а.е.
Описанные выше параллаксы называют тригонометрическими, поскольку они основаны на измерении углов. Однако в астрономии используются и другие, косвенные методы измерения расстояний до светил. При этом найденные негеометрическим способом расстояния часто представляют в виде параллактического угла, используя формулу p = (1 пк/D). Так появились динамический, групповой, средний, спектральный и энергетический параллаксы.
ПАРАЛЛАКС-ЭФФЕКТ В ДИЗАЙНЕ
Параллакс(Parallax, греч. смена, чередование) – это изменение видимого положение объекта по отношению к удаленному фону в зависимости от нахождения наблюдателя. Первостепенно этот термин употреблялся для природных явлений, в астрономии и геодезии. Например, вот такое смещение солнца относительно столба при отражении в воде и есть параллакс в природе.
В веб-дизайне параллакс-эффект или параллакс-скроллинг – это специальная техника, когда фоновое изображение в перспективе двигается медленнее, чем элементы переднего плана. Эта технология применяется все чаще, так как выглядит действительно эффектно и круто.
Достигается такой эффект трехмерного пространства с помощью нескольких слоев, которые накладываются друг на друга и при прокручивании движутся с различной скоростью. С помощью такой технологии можно создать не только искусственный трехмерный эффект, можно применять ее к иконкам, изображениям и другим элементам страницы.
Недостатки параллакс-эффекта
Основной минус параллакса – это проблемы с производительностью сайта. Выглядит все красиво и стильно, но применение javascript/jQuery, с помощью которых и создается эффект параллакса, в значительной степени утяжеляет страницу и очень снижает скорость ее загрузки. Это происходит потому, что в его основе лежат сложные вычисления: javascript приходится контролировать положение каждого пикселя на экране. В некоторых случаях ситуация осложняется еще и проблемами с кроссбраузерностью и кроссплатформенностью. Многие разработчики рекомендуют использовать параллакс-эффект применительно к максимум двум элементам страницы.
Альтернативное решение
С появлением CSS3 задача немного упростилась. С его помощью можно создать очень похожий эффект, который будет намного экономичнее в плане ресурсозатрат. Суть в том, что контент сайта размещается на одной странице, а перемещение по подстраницам происходит методом CSS3-перехода. Это тот же параллакс, но с некоторым отличием: дело в том, что достичь того, чтобы перемещение осуществлялось с различной скоростью, используя только CSS3, невозможно. Кроме того, данный стандарт поддерживается не всеми современными браузерами. Поэтому и здесь есть свои сложности.
Вывод. Эффект параллакса хоть и популярен, но далеко не все спешат его использовать при создании сайтапо причине вышеозвученных проблем. Видимо, пока просто необходимо время, чтобы технологии смогли преодолеть возникшие трудности. А пока такой вариант можно использовать на сайтах-одностраничниках: так он точно запомнится и сумеет удержать пользователя.
Параллакс на javascript
• jQuery–эффект параллакс скроллинга – плагин, которые привязывает эффект параллакс к движению колесика мыши
• Scrolldeck – плагин для создания параллакс-эффекта
• позиционированные слои, движущиеся в соответствии с мышкой
Примеры сайтов с параллакс-эффектом: digitalhands.net
Роб Палмер (Rob Palmer), дизайнер и креативный директор из Великобритании, в своей статье «The TroublesomeMisconception of Parallax in Web Design» расставляет точки в этом вопросе, показывает, чем параллакс отличается от «просто анимации».
Параллакс — это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.
Итак, для достижения эффекта параллакса, предмет должен занимать видимое положение и реагировать на изменения среды, в которой находится. По сути, мы говорим о восприятии глубины или стереоскопическом зрении. Оно позволяет нам объединять две отдельные сцены в одну с учетом расстояния между ними.
Давайте взглянем на несколько сайтов, на которых, как уверяют их разработчики или пользователи, применяется параллакс.
1. Nytimes.com
2. Life of Pi
3. Shibui.me
4. Scytale.pt
5. Madebyblock.com
Ни на одном из них не применяется параллакс. Здесь была только имитация движения, которого никак не ожидает пользователь, и еще — скольжение двух плоскостей друг над другом на разной скорости прокрутки.
Это не параллакс. Почему? Давайте вернемся к нашему определению. Где объект? Где две линии взгляда, которые можно объединить в одну? Без выполнения этих условий нельзя говорить о параллаксе.
Параллакс за 90 секунд – видеоурок:
https://www.youtube.com/watch?v=ryX632E58jA
Фон приближается/удаляется
Давайте сделаем такой эффект в системе Вектор см. втавку
Фон берем картинку Базыбайского порога
Параллакс-анимация в черную дыру попасть
(можно под второе дно и золотишка Колчака набрать )
С анимацией см.здесь
http://old.msun.ru/Vector/Klub100/Klub100_main.htm