Views Comments Previous Next Search

Как я перестал беспокоиться и полюбил параллакс

Если верить «Википедии», паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») — это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

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

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

 

Впрочем, параллакс-скроллинг — это тот случай,
когда лучше один раз увидеть, поэтому вот небольшая подборка классных примеров:

 

Как я перестал беспокоиться и полюбил параллакс. Изображение № 1.

SONY

Как я перестал беспокоиться и полюбил параллакс. Изображение № 2.

Cyclemon

Как я перестал беспокоиться и полюбил параллакс. Изображение № 3.

New-york times

Как я перестал беспокоиться и полюбил параллакс. Изображение № 4.

EVERY LAST DROP

Как я перестал беспокоиться и полюбил параллакс. Изображение № 5.

Peugeot

Как видим, сейчас созданием объёма дело далеко не ограничивается, и дизайнеры создают целые анимированные истории, вызывая у пользователей «вау-эффект». Несмотря на то что приведённые выше примеры серьёзно отличаются друг от друга, в их основе лежит один и тот же принцип. 

Как я перестал беспокоиться и полюбил параллакс. Изображение № 6.

Хотите попробовать cделать что-то подобное? Понадобятся знание HTML, CSS и JavaScript. 

А если очень хочется попробовать, но не понятно, с чего начать — разобраться с принципом действия можно, прочитав о нём вот тут. На тот случай, если лень писать самому, то можно воспользоваться готовыми плагинами, которые помогут вращать, замедлять, ускорять и превращать объекты на странице, — сейчас их пруд пруди. 

  

Рассказать друзьям
1 комментарийпожаловаться

Комментарии

Подписаться
Комментарии загружаются
чтобы можно было оставлять комментарии.