DERLETZTEKUSS
@DERLETZTEKUSS

Как сделать эффект соединения кусочков изображения в одно целое?

Представьте, скажем на странице хаотично располагаются 10-15 кусочков изображения, при прокрутке вниз они собираются в одно целое, тем самым образовав полную картинку.
Мне кажется такого эффекта можно добиться с помощью технологии Parallax. Но как именно? Возможно есть готовые решения, но я не нашел даже туториалов.

Заранее спасибо за ответы!
  • Вопрос задан
  • 3470 просмотров
Решения вопроса 2
copal
@copal
𝄞 ...оооо baby
Теоретически это должно выглядеть примерно так -
1) отталкиваясь от размеров экрана создать нужное количество квадратиков.
2) учитывая размеры квадратиков рассчитать для каждого координаты на плоскости и сохранить их.
3) каждому квадратику расчитать рандомное положение на плоскости ( x, y, rotation ).
4) задать квадратикам рандомные координаты и сохранить.
5) подписаться на событие прокрутки колеса мыши и рассчитать сколько "анимационного времени" должно пройти за определенное значение дельты.
5) задать анимацию движения от "текущего положения" к "положению рассчитанному на шаге 2.
6) начать крутить колесиком и смотреть, как из рандомных координат картинка начинает собираться.
7) после того, как она соберётся установить интервал для прокрутки колеса мыши, например в пол прокрутки, чтобы анимация не реагировала.
8) после того, как будет преодолен установленный на предыдущем шаге интервал, начать анимацию приводящую сложенною картинку, обратно к рандомным координатам.

Приблизительно вот так. Но Вы сделайте сначала один квадратик и приладьте к нему анимацию, чтобы он туда-сюда собирался. Потом увеличьте до двух, трех и так далее.
Ответ написан
Комментировать
xeLL
@xeLL
Fullstack web developer
Можно использовать https://github.com/Prinzhorn/skrollr, например, и выставлять частям пазла нужные координаты вручную.

Как это сделать алгоритмически мне тоже интересно.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
https://greensock.com/gsap
Поможет управлять временной шкалой анимации
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы