Параллаксный скроллинг в современных интерфейсах работает следующим образом: фоновые элементы перемещаются медленнее, чем элементы переднего плана, при прокрутке. 23 Это создаёт иллюзию глубины и ощущение погружения в виртуальный мир. 2
Для реализации эффекта можно использовать CSS в 3D. 1 В обычном скролле, который не имеет понятия перспективы, прокрутка происходит в пропорции 1:1 при сравнении прокручиваемого и его дочерних элементов. 1 Например, если прокрутить элемент вниз на 300px, то его дочерние элементы трансформируются вверх на ту же величину: 300px. 1 Однако применение значения перспективы к прокручиваемому элементу нарушает этот процесс и изменяет матрицы, лежащие в основе трансформации прокрутки. 1 Теперь прокрутка на 300px может переместить дочерние элементы только на 150px, в зависимости от выбранных значений perspective и translateZ. 1
Важно, что этот процесс обрабатывается как часть внутреннего механизма прокрутки браузера автоматически, то есть нет необходимости слушать события прокрутки или изменять background-position. 1