Задать вопрос
@iliya2004
Верстальщик, программист, дизайнер
css

Как сделать параллакс эффект прокрутки на CSS?

<body>
    ..контент..
    <div class="parallax">aaa</div>
    ..контент..
</body>

Нужно, чтобы parallax скроллился медленнее, чем остальной контент.

Я пробовал несколько вариантов с гугла, но блок просто отодвигался по оси z, но скроллился так же.

Не понимаю как, но раньше у меня работал вариант с perspective:1px у body и transform: translateZ(-1px) у parallax.
  • Вопрос задан
  • 321 просмотр
Комментировать
Подписаться 3 Простой Комментировать
Решения вопроса 1
@iliya2004 Автор вопроса
Верстальщик, программист, дизайнер 
body, html {
    margin: 0;
    height: 100%;
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
}

parallax {
     transform: translateZ(-1px)
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend React
Glob-com
от 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать дизайн лендинга
25 апр. 2024, в 09:29
2500 руб./за проект
Сделать красивый лендинг в Тильде
25 апр. 2024, в 09:27
4000 руб./за проект
Создание видео. Моушен дизайн
25 апр. 2024, в 09:20
10000 руб./за проект
Ещё заказы