Как сделать parallax?

Question

[Артем Гвоздев]

Доброй ночи, как сделать можно вот такой эффект?
www.narochpark.by
подкиньте плиз библиотеки и статьи для раздумий

Answer 1

[Rustam Bainazarov]

Конкретно как там — делать не стоит. Там анимируется с помощью свойства top, поэтому все глючит и скачет с 10-ю кадрами в секунду. Анимировать такие штуки надо с помощью translate3d, чтобы задействовать GPU. Почему translate3d, а не translateX? Потому что анимирование c с помощью translateX глючит (идет с рывками) в IE11, первых EDGE и старых Firefox, если сочетать с transition для эффекта инерции.

Один из таких плагинов, который делает это нормально:
https://dixonandmoe.com/rellax

Он анимирует как раз с помощью translate3d. У меня есть положительный опыт работы с ним. Но не переусердствуйте :))

Update: Хотя я и за плагин выше, потому что он сильно упрощает задачу по позиционированию, инициализации и изменению скорости параллакса, но обратите внимание на ответ Максим Ленский касательно метода без плагина.

Дополняя ответ Максим Ленский и совмещая его с translate3d, можно сделать так. Код ниже содержит много лишнего CSS, потому что он из проекта вырван. Скорее всего, JS тоже весьма примитивен (ибо я писал), но суть алгоритма ясна:

Comments

[frees2]

SmthTo, Спасибо, пиксели бы заменил и прокрутку (бегунок) убрал, он не нужен.

[Rustam Bainazarov]

frees2, это я скопировал код из реального проекта, просто вырвав блок с параллаксом + добавил высоту странице, чтобы прокрутка была.

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

[Артем Гвоздев]

SmthTo, Болбшое спасибо за развернутый ответ)

[frees2]

SmthTo, Два недостатка
1 дёрганье
2 jquery.js

[Rustam Bainazarov]

frees2, переделайте на Vanilla, если нужно, jQuery повсюду. Я же не на задании партии, я говорю о возможном решении.

Ну а потом, у меня не дёргается. Десктоп (Windows; Chrome, Firefox, EDGE), ноутбук (MacOS; Chrome, Safari, Firefox).

Даже на телефоне не дёргается (Android Chrome):
https://ru.files.fm/u/h5bq6fku#/

Если хотите супер-плавное решение, чтобы всё и всегда было как рендерах и на всех машинах пользователей, то его нет и не будет скорее всего ещё очень долго, если говорить о подобных вещах.

Более плавное решение знаю только на лютом JS, для которого нужно нужно тянуть ещё библиотеки.