Как я перестал беспокоиться и полюбил параллакс
Если верить «Википедии», паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») — это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.
Возможно, с этим термином вы и не встречались, но его действие видели почти наверняка. Ещё со времён восьмибитных приставок вы можете помнить интересный трюк, делающий двухмерную графику объёмной. Если говорить совсем просто, то изображение формируется из нескольких движущихся слоёв, причём те слои, что ближе к зрителю, движутся быстрее. Это и позволяет ощутить глубину изображения.
Пару лет назад параллакс был приспособлен для веб-дизайна, позволяя привязывать анимацию сайта к прокрутке. Как выяснилось, это позволяет добиваться удивительных эффектов, которые были несвойственны вебу до этого.
Впрочем, параллакс-скроллинг — это тот случай,
когда лучше один раз увидеть, поэтому вот небольшая подборка классных примеров:
Как видим, сейчас созданием объёма дело далеко не ограничивается, и дизайнеры создают целые анимированные истории, вызывая у пользователей «вау-эффект». Несмотря на то что приведённые выше примеры серьёзно отличаются друг от друга, в их основе лежит один и тот же принцип.
Хотите попробовать cделать что-то подобное? Понадобятся знание HTML, CSS и JavaScript.
А если очень хочется попробовать, но не понятно, с чего начать — разобраться с принципом действия можно, прочитав о нём вот тут. На тот случай, если лень писать самому, то можно воспользоваться готовыми плагинами, которые помогут вращать, замедлять, ускорять и превращать объекты на странице, — сейчас их пруд пруди.
Комментарии
Подписаться