С помощью чего можно реализовать подобный эффект?

Question

[Destell]

Ссылка

С помощью чего можно реализовать подобный эффект на мотоцикле? SVG?

Answer 1

[Сергей delphinpro]

Эффект зума элементарно transform:scale
с табами вроде тоже всё просто, тот же transform:translateX
Картинку мотоцикла пилим на две части. На бэк подкладываем цельную, сверху точно переднюю половину, у нее в фотошопе плавно обрезаем левый край. Между ними втыкаем svg-график. Анимация самого графика довольно проста - transform:scaleY

Вот так, разложив анимашку на составляющие, видим, что самое сложное там — поработать в фотошопе с мотоциклом (ну для меня по крайней мере) =)

Comments

[Destell]

Вот как-то так)
Реально неожиданно простая и удобная реализация, я сразу начал думать о svg и подобном) Спасибо.

А эффект белой обводки и полосы на колесе как лучше реализовать - svg контуром и svg же полосой с анимацией?

Answer 2

[askhat]

Canvas или SVG

Answer 3

[Андрей]

Обычный gif-файл с анимацией

Comments

[askhat]

Конечно, это же мок, а не реализация

[Alex]

Askhat Bikmetov, А почему бы и нет?
Про интерактивность то никто не спрашивал =)