Как сделать чтобы js резал картинку напополам и одна часть уходила вверх, другая вних или наоборот?

Question

[Игорь Лавров]

Вот пример: https://ru.4game.com/lineage2/install/

По коду смотрел там идет 1 изображение, которое режется на 2 части.

Как сотворить такой эффект?

Answer 1

[hack504]

Конкретно этот реализован таким образом, что в левый блок (".l2-screen__aside") на момент анимации "что-то" записывается, а после завершения анимации удаляется. Таким образом в момент translateY, этот блок имеет дубликат картинки.
Реализовать такое с нуля будет долго - вся логика в JS и он там хранит параметры блоков (позиционирование, ширина, трансформация) и меняет их.

Comments

[Игорь Лавров]

Такого ответа я и ждал... Теперь узнать бы как это все реализовывается...

ибо все другие советы никак не помогают, особенно при верстке такой бред выходит...

[hack504]

Вытащи main.js из этого сайта и сделай деобфускацию (например тут). В этом js найдешь переменную bgAside и функцию render. Но разбираться в чужом коде - то ещё занятие).

[Игорь Лавров]

hack504, мда, там полный пиз****

Постараюсь расковырять

Answer 2

[Stalker_RED]

Создаем блок с копией картнки, скрываем часть картинки при помощи overflow hidden
при помощи transform translate отправляем одну часть вверх, другую вниз