Расщипление картинки параллаксом,как?

Question

[sexy__sky]

Как сделать горизонтальный параллакс чтоб при скролле цельная картинка расщиплялась на детали.Пример телефон tornado.fly-phone.ru - там телефон расщипляется на детали.Как это сделать, где научиться?

Answer 1

[Александр Коротаев]

Тут надо изначально подготовить все детали как отдельные картинки.
Наложить друг на друга в верстке.
Далее поставить коллбек на событие скролла и внутри него если элемент находится в области видимости изменять left у элемента.
Для движения как на представленном сайте (сначала расходится, потом - схлопывается) подойдет расчет с синусом и коэффицентом вроде такого
Math.sin(window.scrollY) * K
Где K надо будет подбирать взависимости от того какая амплитуда требуется

Comments

[sexy__sky]

Александр, доброго времени суток.Не могли бы вы мне помочь с этим ?( моих знаний JS явно не достаточно в данный момент(

[Александр Коротаев]

sexy__sky: Ну вы хоть начните что-то делать.