parallaxInfo

Пара…что?

Одно из самых популярных и быстро развивающихся направлений в современном веб-дизайне и «сайтостроении», является использование параллакс эффекта прокрутки. В этой статье, я постараюсь объяснить вам, что такое параллакс и как можно создать такой эффект на веб-сайте.
Параллакс — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.
Не так давно о параллаксе никто и не слышал, но все изменилось примерно в 1980 гг. Тогда этот эффект начал появляться в заголовках игр и позже, в самих интерфейсах. Прошло время и эффект добрался до веба. Одними из первых его использовали и грамотно запустили на своем сайте Nike’s Better World. Не могу сказать, что это был «бум», но когда при движении страницы начинают летать элементы – вы невольно начинаете искать свою челюсть. В сочетании с прокруткой сайта, параллакс эффект может иметь колоссальное визуальное воздействие, особенно в сочетании с некоторой формой рассказа, которая погружает вас в необычный мир компании и увлекает за собой в путешествие.
Многие путают эффект параллакса с современными возможностями HTML5. То есть, HTML5 позволяет создать эффект движения, путем эмуляции анимации, тогда как параллакс дополняет это действие смещением объекта относительно видимой точки и благодаря скролу, наш глаз воспринимает это как «проделки Дьявола». Макет делится на фоны и отдельные изображения, а затем, параллакс позволяет им двигаться с разной скоростью, создавая ощущение глубины и размеров. Успокойтесь, с ума от параллакса вы не сойдете, просто заинтересуетесь, улыбнетесь, а быть может и удивитесь.
Ключевую роль в обеспечении интереса и уникальности, играет концентрация внимания на хорошей истории, которая благодаря эффекту преображается в творческий рассказ, автором которого выступаете вы.
SpasMain-01 (1)
anubis (1)
Для удобства пользования сайтом обычно оставляют три пути движения:
  • обычный скролл
  • с использованием меню навигации
  • кнопок следующего/предыдущего слайдов
При прокрутке, объекты страницы анимируются независимо друг от друга, чтобы создать иллюзию глубины.

Принцип работы параллакса

Для работы нам понадобятся базовые знания CSS, HTML, Javascript и немного воображения.
Перед началом работы вы определяете, какое изображение будет для вас недвижимым, а какие будут смещаться. Фон размещается «относительно», движимые объекты – «абсолютно». Это обеспечивает свободу движения и ограничивает поля выхода за пределы. Важным моментом, которого мы стараемся избегать в нашей студии – это использование сторонних библиотек для создания этого эффекта. Практически любой урок по параллаксу говорит вам подключить ту или иную библиотеку, что совершенно излишне.
Если вы все таки решили создавать параллакс с помощью них, вам стоит обратить свое внимание на следующие:
  • Одни из самых полезных скриптов для понимания начинающим jQuery-Parallax
  • ScrollPath — пригодится вам, в случае если вы планируете двигать объекты в не стандартных направлениях
  • Не самая любимая, однако очень популярная Stellar.js
  • Если ваш сайт подразумевает горизонтальное движение, обратите внимание на jInvertScroll
  • Не обычная и подвижная Scrollorama
Единственной библиотекой упрощающей вам работу будет классическая JQuery. Она позволит вам получить позиции элементов и анимированно сместить их в необходимую точку. Главный принцип работы состоит в том, чтобы по обработчику события скрола вызывать функцию сдвига по отношению к крайней точке экрана.
И в зависимости от движения, высчитывать сдвиг для каждого их объектов.
$(window).bind(‘scroll’,function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop(); // крайняя точка скрола для отсчета
$(‘#parallax-object’).css(‘top’,(0-(scrolled*.25))+’px’); // сдвиг по оси Y относительно крайней точки
}
Специалисту, этот код не будет загадкой. Как вы можете видеть, свойства CSS лучше всего подходят для перемещения каждого из слоев. Слой переднего плана всегда выравнивается по верхней части документа, в то время как движение других слоев регулируются в зависимости от их глубины. В продолжение этого эффекта вы можете использовать animate, позволяющий создать дополнительное, плавное смещение. Также, эффект animate будет вам полезен, если ваш сайт предусматривает скольжение от слайда к слайду. Это проблематично, потому что анимация должна работать в момент этого самого перехода. Для решения этой задачи, вы можете использовать так называемые опции, которые позволяют отлавливать начало, конец или состояние в процессе.
Параллакс прокрутки является одним из самых любимых эффектов последнего времени и люди постоянно расширяем границы его использования. Перед созданием проекта, посвятите какое-то время созданию концепции и истории. Это основной фактор, делающий ваш сайт уникальным, логичным и приносящим истинное удовольствие при просмотре. Используйте этот эффект с умом, а не просто ради «галочки».
Надеюсь, в ближайшем будущем мы будем наблюдать все больше и больше новых сайтов с использованием параллакса. Если я вас заинтересовал, обращайтесь к нам и наша команда профессионалов поможет вам создать что-то уникальное и не похожее на остальных.

Комментарии отсутствуют

К сожалению, форма комментария закрыта на какое-то время.

Развивайте ваш бизнес уже сегодня. Мы всегда делаем больше чем обещали!