Многослойный параллакс

Нитяна Баба

Спокойные слои неба, свечения и «холмов» двигаются с разной скоростью при прокрутке и при движении курсора — для ощущения глубины и мягкого, «живого» фона.

Листайте вниз ↓

Как это устроено

Параллакс по скроллу. Каждый слой смещается пропорционально data-parallax — чем больше коэффициент, тем быстрее «сдвигается» слой относительно страницы.

Параллакс по мыши. Лёгкий сдвиг слоёв в сторону курсора усиливает эффект глубины (отключается при «reduce motion» в системе).

Это отдельная тихая страница: только CSS-фон и параллакс по скроллу/мыши. 360°-просмотр по адресу /parallax-360viewer/. Просмотрщик с 2–8 PNG-слоями (Kie и т.д.) — /parallax-360viewer/layers-parallax/.