Создаём parallax scrolling эффект с помощью jQuery и CSS. Параллакс эффект. Плагин Simple Parallax Scrolling Слой текста и его позиции
В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.
Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame . Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?
Перенос параллакс эффекта в CSS спасает от проблем с производительностью и лишних манипуляций, позволяя браузеру самому всё регулировать за счёт аппаратного ускорения. В результате, почти все ресурсоёмкие процессы обрабатываются напрямую браузерным движком. Частота кадров (FPS) остаётся стабильной, а картинка становится плавной. Плюс, можно сразу комбинировать параллакс с другими CSS фишками - media queries или supports. Отзывчивый параллакс - каково?
...
...
...
И базовые стили:
Parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
Вся магия происходит в классе parallax . Определение свойств стилей height и perspective установит перспективу элемента в его центре, создав фиксированный 3D вьюпорт. overflow-y: auto позволит контенту внутри элемента нормально скроллиться, при этом потомки элемента будут отрисовываться относительно фиксированной перспективы. В этом и заключается ключ к созданию параллакс эффекта.
Далее, класс parallax__layer . Как и следует из имени, он определяет слой контента, к которому будет применен параллакс эффект. Элемент с этим классом выдирается из общего потока контента и позиционируется так, чтобы заполнить свой контейнер.
Наконец, у нас есть классы-модификаторы parallax__layer--base и parallax__layer--back . Они нужны, чтобы регулировать скорость скролла параллакс элементов, смещая их по оси Z (удаляя или приближая к вьюпорту). Для краткости я сделал всего две скорости скролла - позже мы добавим еще несколько.
Коррекция глубины Так как параллакс эффект создаётся за счёт 3D преобразований, смещение элемента по оси Z имеет побочный эффект - размеры элемента меняются, в зависимости от того, ближе или дальше он к вьюпорту. Чтобы исправить это, нам нужно применять scale() трансформацию, чтобы элемент отрисовывался в своём изначальном размере:Parallax__layer--back {
transform: translateZ(-1px) scale(2);
}
Коэффицент скейла можно посчитать по формуле 1 + (translateZ * -1) / perspective) . Например, если перспектива вьюпорта задана как 1px и мы смещаем элемент на -2px по оси Z, то коэффицентом будет scale(3) .
Parallax__layer--deep {
transform: translateZ(-2px) scale(3);
}
(т.е. translateZ(-10px) будет скроллиться медленнее, чем translateZ(-1px)).Создание разных участков параллакс эффекта Предыдущие примеры демонстрировали базовую технику использования простого контента, но ведь большинство параллакс сайтов делят страницу на разные участки с разными эффектами. Вот как можно реализовать это в нашем методе.
Во-первых, нам нужен элемент parallax__group , чтобы сгруппировать наши слои вместе:
...
...
...
для него CSS будет выглядеть так:
Parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
}
В этом примере я хочу, чтобы каждая группа заполнила вьюпорт, поэтому я задаю height: 100vh , хотя, если нужно, число для каждой группы может быть разным. transform-style: preserve-3d не даёт браузеру сделать плоскими элементы с parallax__layer , а position: relative позволяет дочерним parallax__layer элементам позиционироваться относительно их группы.
Важное правило, которое нужно помнить - при группировке элементов мы не можем обрезать контент внутри группы, тк overflow: hidden у элемента parallax__group сломает весь параллакс эффект. Необрезанный контент приведёт к тому, что дочерние элементы будут выступать за рамки. Поэтому нужно пошаманить с значением z-index у группы, чтобы быть уверенным, что контент будет корректно прятаться и показываться по мере того, как пользователь будет скроллить сайт.
Нет никаких жестких или быстрых правил по поводу работы со слоями и разные методы подразумевают разную реализацию. Но, чтобы упростить отладку позиционирования слоёв, можно применить простую трансформацию групповых элементов:
Parallax__group {
transform: translate3d(700px, 0, -800px) rotateY(30deg);
}
Взгляните на следующий пример и обратите внимание на галочку debug !
Публикуем реализацию очень простого Parallax эффекта при прокрутке страницы. Данный parallax эффект не только очень прост в установке и настройке, но и сам по себе скрипт параллакса небольшой и не нуждается в дополнительных настройках. Работает данный скрипт при подключенной библиотеки jQuery.
ИСХОДНИКИ
подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!
Поэтому подключаем к HTML документу сначала jQuery , а после сам скрипт parallax.min.js
Выглядит подключение вот так:
Ну а теперь HTML CSS подключение параллаксаБерите блок, это может быть header , section , div , footer .
Блок div , в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.
section class="parallax"
CSS .parallax { min-height: 400px; background: transparent; } Обязательные атрибуты параллакса
data-parallax="scroll" — нужен для срабатывания скрипта;
data-image-src="img/bg_4.jpg — картинка, точнее путь к картинке;
На странице разработчика указан полный список атрибутов.
class="parallax" — любой класс, об этом написано выше.
section class="parallax" — надпись внутри блока с parallax эффектом, в данном случае заголовок.
Материал взят из зарубежного . И представлен исключительно в ознакомительных целях.
Параллакс-эффект, также называемый параллакс-скроллингом, представляет собой особую технику, используемою в первую очередь в компьютерной графике, когда фоновые изображения в перспективе двигаются медленнее, чем двигаются элементы, расположенные на переднем плане. Сегодня подобная техника очень актуальна и распространена в области веб-дизайна. Раньше она была широко применима в игровой индустрии (10-15 лет назад).
В последние годы параллакс-скроллинг все чаще применяется в веб-дизайне. Популярность данного подхода стала расти с тех пор, когда компания Nike обновила дизайн своего сайта, и использовала данную идею. Ниже в подборке вы сможете увидеть данный пример.
Технология эта прижилась в сфере дизайна только потому, что она выглядит действительно креативно и круто. Несмотря на растущую популярность, этот эффект всегда можно реализовать как-то по особому и очень успешно. Иногда, при прокрутке, фоновое изображение также изменяется, но это не обязательное требование. Лучшая сторона данного эффекта заключается в том, что он состоит из нескольких слоев изображений, которые как бы «наложены» друг на друга, и все они двигаются с разной скоростью, что создает эффект трехмерного пространства.
Хотя зачастую данный эффект применяют именно подобным образом, это вовсе не означает, что вы ограничены лишь созданием искусственного трехмерного эффекта. Его также можно применять к различных иконкам, изображениям и другим элементам на странице, что в значительной степени увеличивает взаимодействие посетителей с сайтом.
Когда они видят этот эффект в первый раз, им кажется, что этот эффект очень интересный. Но после того, как они проведут больше времени на сайте, где используется параллакс-эффект, они понимают, что это нечто большее, чем просто «интересный».
Проблемы с производительностью
Хотя эффект и выглядит превосходно, у него есть некоторые отрицательные стороны, как например проблемы с производительностью. В те времена, когда Nike создали с использованием данного эффекта, это было реализуемо только посредством применения javascript/jQuery, что в значительной степени утяжеляло страницу, и понижало скорость ее загрузки. Но тогда недостатки в производительности списывали за счет превосходного внешнего вида сайта. Это означало, что удобство пользования сайтом напрочь пропадало, так как он загружался неимоверно медленно. Это и стало самой большой проблемой.
javascript сложно воспроизводить, так как технология должна управлять расположением всех элементов на странице. Хотя это и не кажется такой уж и сложной задачей, на самом деле это очень сложно. javascript нужно проводить вычисления для каждого пикселя на странице сайта, который прокручивают скроллингом. В зависимости от скорости прокрутки страницы, количество вычислений может достигать 100 в секунду. И учтите, что каждый элемент на странице управляется javascript в то же время, когда и проводятся вычисления. Не удивительно, что эффект параллакс было не только сложно разрабатывать, но и так же сложно подгрузить, если соединение с интернетом было медленным.
Многие разработчики не рекомендуют прикреплять данный эффект к более чем 2-м элементам на странице. Несколько лет назад, нужно было обязательно тестировать страницы на компьютерах средней мощности до того, как запускать их на сайте.
Технологии новой эры
Хотя данный эффект не так-то просто разработать, существуют различные решения. С выходом CSS3, создание эффекта параллакс в значительной степени облегчилось.
Суть проста. Весь ваш контент размещен на одной странице, и перемещение по «под-страницам» осуществляется посредством CSS3-перехода. В целом, это принцип работы старой доброй техники с переходом по якорным ссылкам, но на этот раз к этому добавляется переход. Ниже вы можете видеть отличный пример!
Как вы могли заметить, весь контент размещен на одной и той же странице, и перемещение от одной «страницы» к другой происходит посредством CSS3-перехода. Это почти такой же эффект, что и параллакс, но в бесконечное количество раз легче с точки зрения загруженности страниц в браузере.
Но здесь все-таки есть некоторое отличие. Насколько нам известно, практически невозможно (или по крайней мере очень сложно) заставить элементы одной и той же страницы двигаться с разной скоростью, если использовать CSS3-переход. Это значит, что настоящий параллакс эффект невозможно полноценно скопировать за счет свойств только лишь CSS3.
Здесь также есть еще один недостаток – CSS3 не поддерживается некоторыми современными браузерами. По крайней мере, пока что. Это означает, что для создания полноценного эффекта параллакс все равно пока еще необходимо использовать javascript.
javascript в деле
Данный плагин позволяет привязывать параллакс-эффект к скроллингу и колесику мыши с помощью jQuery. Это позволит вам сделать так, чтобы фоновое изображение или любой другой элемент на странице двигался со скоростью отличной от скорости прокрутки страницы, что создает иллюзию глубины.
Данный плагин позволит вам без труда создавать параллакс-эффект при прокрутке веб-страниц.
jParallax описывают как jQuery-плагин, который превращает элементы на странице в абсолютно позиционированные слои, которые двигаются в соответствии с передвижением мыши. Слои перемещаются на разной скорости, и это зависит от их размеров.
Этот плагин наиболее походит для ваших нужд. Он поможет вам создать схожий параллакс-эффект за счет заранее предустановленных путей. Даже если его сложно назвать очень удобным в дизайне, он в любом случае сделает вашу страницу очень привлекательной и интерактивной.
Обучающие статьи посвященные параллакс-скроллингу
Если вы хотите научиться создавать параллакс-эффект самостоятельно, то мы собрали для вас несколько обучающих статей.
: (Параллакс-скроллинг на jQuery)
: (Разрабатываем платформу с прокруткой в стиле параллакс)
: (Обучающая статья по разработке шапки сайта, анимированной в стиле параллакс)
: Build a Parallax Scrolling Website Interface With jQuery and CSS ()
Суть эффекта параллакс заключается в разных скоростях движения отдельных элементов фоновой картинки, при этом сам фон при прокручивании страницы, движется медленнее остальных, что создает ощущение глубины и трехмерности.
Благодаря популярности параллакс эффекта , уже существуют готовые плагины с реализацией простой parallax анимации на сайте. Наша задача состоит в том, чтобы эффективно воспользоваться готовыми решениями и уметь применять их на своих сайтах.
Как работает параллакс эффект , можно увидеть на официальной странице данного плагина, где можно скроллить страничку и сразу видеть такой эффект, когда нижний блок с одной фоновой картинкой наплывает на верхний.
Что необходимо для реализации параллакс-скроллинг эффекта?
min-height: 500px;
background: transparent;
}
Перед заливкой на сервер у вас должна быть папка с фотографиями, папка со скачанными скриптами (jquery.min.js и parallax.js) , а так же HTML файл и CSS стили.
Полный HTML-код:
Parallax Scrolling
В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.
Что такое «parallax» ? Даже если вы не знакомы с термином «parallax scrolling» , вы наверняка знакомы с техникой. Parallax scrolling - это процесс 2D анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. Когда вы наблюдаете за движущимся автомобилем, вам кажется, что объекты расположенные перед автомобилем, движутся быстрее, чем объекты расположенные за автомобилем. Parallax scrolling использует тот же принцип, чтобы заставить зрителя думать, что он наблюдает за 3D сценой.Вы можете скролить обычным способом, использовать меню навигации в правой части страницы или кнопки следующий/предыдущий, которые появляются под каждой статьёй.
Страница содержит четыре, независимо друг от друга анимированных слоя, для создания иллюзии глубины.
В Safari прокрутка происходит плавно (по крайней мере, у меня на компьютере), но демо должно работать в любом современной браузере.
Disclaimer 1: Так как это всё лишь эксперимент, я не проводил оптимицацию демо для работы на мобильных устройствах.
Disclaimer 2: Навигационное меню, которое используется в демонстрации, подсмотрено на сайте Nike Better World. Если вы планируете использовать аналогичную навигацию на своём сайте, имейте в виду её происхождение.
Как это работает Статьям и фоновому слою, с помошью CSS назначено фиксированное положение, также им назначено свойство z-index для того, чтобы новые слои появлялись выше фонового слоя. Используется четыре слоя: небольшие облака, большие облака, воздушный шар/изображение пейзажа, слой со статьями. /* передний слой (воздушный шар/изображение пейзажа) */
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* выравниваем левый край с центром окна */
top: 0;
width: 940px;
margin-left: -470px; /* двигаем влево на полширины элемента */
}
Каждый слой имеет абсолютное позиционирование. Это было самой сложной частью всего процесса, так как элементы должны располагаться таким образом, чтобы при прокрутке к любой из четырёх статей, было одинаковое выравнивание статьи относительно окна браузера. В данном случае, это было достигнуто методом проб и ошибок.
#bg3-1 {
position: absolute;
top: -111px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 812px;
left: 321px;
}
/* и так далее… */
Всего несколько строк кода с использованием jQuery нужно для создания parallax scrolling эффекта. Я был удивлён, насколько это просто.
$(window).bind("scroll",function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$("#parallax-bg1").css("top",(0-(scrolled*.25))+"px");
$("#parallax-bg2").css("top",(0-(scrolled*.5))+"px");
$("#parallax-bg3").css("top",(0-(scrolled*.75))+"px");
}
Слой переднего плана всегда выравниваются по верхней части документа, в то время как движение других слоев регулируется в зависимости от их глубины.
Чем ниже слой, тем медленнее он движется.
Остальной jQuery код используется для управления навигацией. Когда пользователь нажимает навигационную кнопку, страница прокручивается до соответствующей статьи. В случае, если у пользователя отключен JavaScript, в дело вступают «якоря» используемые на ссылках. Они по-прежнему позволяют перемещаться по странице, но уже без анимации.
Следующие шаги Я уверен, что есть много других способов создания parallax scrolling эффекта, и надеюсь, мой опыт послужит отправной точкой для исследования этого метода.
