3d parallax background

Добавим немного JQuery

Оживляем сайт

Наша страница уже выглядит неплохо, но слои совершенно не двигаются. Давайте исправим это, написав немного кода
на JQuery. На все окно добавим обработчик события scroll. В переменную top запишем количество пикселей, которое мы прокрутили от верха страницы в данный момент.
Получим все слои параллакса и переберем их в цикле. Осталось только получить позицию слоя по вертикали по формуле -(top * speed / 100) и записать ее в свойство transform: translate3d каждого слоя.

Скачать исходники:parallax.rar

Параллакс эффект готов. Конечно, если вы захотите разместить подобный код на своей странице, его придется еще доработать.
JS Параллакс может оказывать влияние на производительность и на мобильных устройствах желательно его не показывать.
При низкой скорости интернета 9 изображений для главного экрана могут долго загружаться.
Желательно скрыть параллакс во время загрузки изображений, например добавив прелоадер.

3D Parallax Background — отличное приложение с живыми обоями

3D Parallax Background — одно из лучших приложений для обоев на сегодня. Он получил более 500 000 установок и средний рейтинг 4,5 звезды в Google Play. Если вы устали от традиционных 2D-обоев и хотите совершенно новый стиль обоев, 3D Parallax Background поможет вам сделать это всего за несколько простых шагов.

Операционная система Android привлекает пользователей своим высоким уровнем настройки

Вы можете персонализировать практически все, что связано с интерфейсом. Обои являются важной частью. Всего за несколько простых операций вы можете получить впечатляющие обои, не обладая большим знанием программного обеспечения

Если вы хотите использовать статические обои, вы можете обратиться к приложениям, которые предоставляют самые популярные обои сегодня, такие, как Zedge, Mobile9. Кроме того, если вы хотите живые обои, 3D Parallax Background — это, безусловно, программа, которую вы должны попробовать.

Кроме того, приложение использует 3D-обои для создания глубины, создавая наиболее реалистичное ощущение, будто объект на обоях появляется перед вами. Благодаря гироскопу, когда вы наклоняете телефон под любым углом, обои меняются соответственно.

Впечатляющая экономия батареи

Многие пользователи хотя бы раз меняли свои обои на анимированные или 3D-обои. Но в результате они вернулись к стандартным обоям после короткого времени использования, поскольку поняли, что новые обои значительно разряжают батарею устройства. 3D Parallax Background преодолел эту проблему. Хотя это не сравнимо со способностью двухмерных обоев экономить заряд батареи, вам, конечно же, не нужно слишком беспокоиться о том, как трехмерные обои расходуют заряд батареи.

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

Высокая совместимость со многими устройствами

Вам не нужно высококлассный смартфон или планшет, чтобы использовать это приложение. Программа работает стабильно и отлично совместим с большинством Android-устройств. Мы попробовали запустить приложение на нескольких устройствах, таких как Sony Xperia XZ, Google Pixel 2, оно отлично работало.

Параллакс скроллинг на JS и CSS

Мы уже разбирали 10 сайтов с крутыми параллакс эффектами и одним из них был сайт игры Firewatch.
Почему бы нам не попробовать повторить этот эффект?

Изображение разбито на 9 слоев

Подключим JQuery:

И создадим HTML разметку. Создадим контейнер div внутри которого будут находится наши слои.
Каждому слою присвоим свой id, чтобы в дальнейшем задать им в качестве фона картинку.
Ниже добавим еще один div в котором будет весь контент нашей страницы.

Как привязать параллакс эффект к движению мыши?

Мы разметили наш параллакс, пора прописать стили. Зададим классам высоту в 1000px.

Классам parallax__layer и maincontent добавим свойство width: 100%, чтобы наши слои растянулись во всю доступную ширину.
Слоям зададим position: fixed, а контенту position: relative. После скролла вниз контент должен начать перекрывать собою слои параллакса,
для этого зададим классам z-index 10 и 99 соответственно.

Каждому слою параллакса зададим в качестве фона свое изображение:

Сам параллакс эффект будет построен на свойстве transform: translate3d. Мы будем перемещать каждый слой в зависимости от
позиции прокрутки страницы. Параллакс эффект достигается за счет разной скорости движения объектов. Задний слой должен двигаться медленнее, чем передний.
Скорость прокрутки каждого слоя поместим в атрибут data-speed слоев.