Двигаем недвижимое

Время на прочтение: 2 минуты
28 апреля 2024

Сегодня я расскажу об эффекте параллакс, созданном на основе библиотеки JavaScript jQuery. Но сначала давайте ответим на вопрос: что представляет эффект параллакса в реальной жизни?  Если коротко, то это изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя. Говоря несколько подробнее, его можно назвать это обманом зрения, иллюзией, которая зависит от положения наблюдающего объекта (т. е. от той точки, с которой вы на него смотрите). Наверняка, каждый из нас замечал, что если смотреть в окно движущегося автомобиля, то объекты вдалеке "проплывают" мимо вас гораздо медленнее, чем те объекты, что находятся вблизи. Так вот это и есть эффект параллакса. Можно взглянуть на этот рисунок, который прекрасно иллюстрирует данный эффект: Итак, что же тогда такое jquery параллакс? Это тот же эффект параллакса, в котором можно задать эти объекты, которые будут перемещаться в зависимости от точки зрения. Последней является курсор мыши.  Именно его Вы могли увидеть на главной странице нашего сайта.Красиво, правда? По-моему это вносит живость на сайт. Теперь немного о синтаксисе: HTML (самый простой вариант)
< div id="parallax">
< img alt="" src="images/1.png" style="width: 700px; height: 300px;"/>  
< img alt="" src="images/2.png" style="width: 400px; height: 300px;"/>    
< img alt="" src="images/3.png" style="width: 300px; height: 100px;"/>
< /div>

Где div c id="parallax" будет главным контейнером для объектов (слоев), которые будут реагировать на курсор мыши. Ему надо обязательно прописать абсолютное или относительное позиционирование (position:relative или position:absolute), иначе ничего не выйдет.Внутри него находятся сами слои, в данном случае это картинки, но это могут быть и другие элементы (например те же дивы).CSS (совсем простой)#parallax {    width:700px;       height:300px; position:absolute; overflow:hidden; }Важно помнить, что у всех слоев должны быть прописаны высота и ширина, и чем они ближе к размерам контейнера, тем медленнее они будут двигаться. Готовой формулы для этого нет, поэтому придется поэкспериментировать, чтобы достичь желаемого эффекта.Осталось только подключить в начало страницы эти скрипты. И вуаля! Все готово. Должен заметить, то у функции jparallax({}) есть ряд опций. Вот некоторые из них: xparallax    boolean | 0-1 | 'n%' | 'npx' yparallax    boolean | 0-1 | 'n%' | 'npx' Включает/выключает параллакс для оси x/y, а так же устанавливает ограничение на движение слоев, либо в процентах, либо в пикселях.