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

Доброй ночи, как сделать можно вот такой эффект?
www.narochpark.by
подкиньте плиз библиотеки и статьи для раздумий
  • Вопрос задан
  • 209 просмотров
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Конкретно как там — делать не стоит. Там анимируется с помощью свойства top, поэтому все глючит и скачет с 10-ю кадрами в секунду. Анимировать такие штуки надо с помощью translate3d, чтобы задействовать GPU. Почему translate3d, а не translateX? Потому что анимирование c с помощью translateX глючит (идет с рывками) в IE11, первых EDGE и старых Firefox, если сочетать с transition для эффекта инерции.

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы