Как реализовать анимацию движения машины при скролле на сайте?

Question

[Виола Беккер]

Подскажите, как реализовать такую анимацию, чтобы при скролле грузовик из-за пределов экрана выезжал и вставал на весы? И возможно ли такое реализовать.

Answer 1

[Сергей Горячев]

Возможно.

Скролл отлавливать на JS (jQuery, например).
Увеличение машины через css transform scale.
Движение через css transform translateX.

А вообще, про параллакс гугли.

Comments

[Виола Беккер]

мне нужно, чтобы грузовик не просто масштабировался и выдвигался при скролле
нужно, чтобы при движении менялся и угол зрения
соответственно грани объектов должны искажаться

[Сергей Горячев]

Виола Беккер, если у тебя 3D модель грузовика, можешь поиграться с каким-нибудь canvas или webgl, если навыки есть. Если же просто вектор, реалистично не сделать.

Answer 2

[Alibek Kulseitov]

Приветствую!) Сталкивался с похожей проблемой, но пришлось кпц попотеть)
Вот глянь тебе такое надо? Мой пример
По скроль вниз и увидишь анимации которые зависят от скролла.
Это библиотека scrollmagic.io + https://greensock.com/gsap

Но поверь) Ты запаришься очень сильно)))

Comments

[Ваня]

Подскажи пожалуйста, как ты реализовал плавный скролл в связке с ScrollMagic? Я пытался, у меня не получалось..

[Alibek Kulseitov]

Ваня, Плавный скролл - это smoothscroll плагин

Answer 3

[Stalker_RED]

Нарисовать отдельно весы, отдельно грузовик.
Весы зафиксировать, грузовик убрать за экран.
Повесить обработчик на scroll, двигать грузовик соответственно скроллу.

Comments

[Виола Беккер]

мне нужно, чтобы грузовик не просто масштабировался и выдвигался при скролле
нужно, чтобы при движении менялся и угол зрения
соответственно грани объектов должны искажаться

[Stalker_RED]

Виола Беккер, WebGL умеет 3D https://web.chemdoodle.com/demos/molgrabber-3d/