Как они реализовали такую штуку?

Question

[Alibek Kulseitov]

Вот наткнулся на такой интересный паралакс или как это назвать.
Сайт Это 3д модель или что? Полазал в скриптах что-то не разобрался как они сделали это.

Comments

[Cyber_bober]

Это спрайт стакана, гуглите спрайтовую анимацию

Answer 1

[GreatRash]

dairyculture.ru/upload/render-img/moloko/moloko0000.png

Стопицот картинок стакана молока, урлы меняются в зависимости от положения скролла. Можно вручную поменять последнюю цифру и посмотреть что получится.

Comments

[zeuss56]

их там всего 30: moloko0000 - moloko0029

[GreatRash]

Вадим Егоров: Ну полный оборот да. Запилить видос было бы проще и весило бы меньше.

[zeuss56]

GreatRash: И вместо замены номера заменять время в видео?

[GreatRash]

Вадим Егоров: Ну да.

[GreatRash]

Вадим Егоров: Хотя, с другой стороны, не уверен, что видео с прозрачностью можно сделать.

[Александр Таратин]

Вадим Егоров GreatRash: Идея с видео не прокатит, промотка занимает много времени.
Пару лет назад делал похожую штуку. Самым производительным вариантом оказалось - Собрать все картинки в архивоподобный файл. При закачке отрендерить их в массив canvas элементов. Для промотки отрисовывать canvas из массива на еще один общий canvas который уже непостредственно размещен на странице.

[Александр Таратин]

GreatRash: Прозрачное видео htmlhook.ru/alfa-prozrachnost-v-video-html5.html

[zeuss56]

Александр Таратин: Спасибо. Там как-раз так и сделано - канвасом и массивом. Не так сложно ориентироваться по F12 как описал задающий вопрос.

[GreatRash]

Александр Таратин: Не дешевле тогда будет сделать 30 картинок и просто менять у них display? Зачем прослойка в виде канваса?

[Alibek Kulseitov]

Вадим Егоров GreatRash Александр Таратин И что ребята получается 30 картинок анимированных при помощи scroll magic?) scrollmagic.io

[Антон Мудренок]

Алибек Кулсеитов: JQuery с плагинами и картинки на Canvas, scrollmagic я там не заметил

[GreatRash]

Алибек Кулсеитов: Скроллмэджик там нафиг не нужен, просто нужно отслеживать процент прокрученности с траницы. Ну если при помощи меджика это сделать проще, то почему нет.

[GreatRash]

Алибек Кулсеитов: codepen.io/GreatRash/pen/qavjBV

[Alibek Kulseitov]

GreatRash: о_О с сайта выдернул?) или сам?

[GreatRash]

Алибек Кулсеитов: Сам написал, там делов на три минуты. Плавный скроллинг нужно ещё прикрутить для красоты.

[zeuss56]

GreatRash: Если следовать вашей идее ("плавный скроллинг докрутить"), то там ещё стаканчик должен плавать слегка вверх-вниз и тень от него. Ах да, там ещё за стаканчиком фон с информацией нужен и рука с пальцем в конце для полноты =)
Кстати, это хороший пример для обучения - попытаться скопировать весь лендинг.

[Alibek Kulseitov]

Вадим Егоров: Согласен) очень полезно будет

[Александр Таратин]

GreatRash: >Зачем прослойка в виде канваса?
Производительность. У меня тогда была задача заставить все работать очень плавно и чтобы opera 12+, IE9+ (иначе бы просто на webgl тогда сделал) и на IOS.
И изображений там было под сотню.
Сейчас пример показать не могу, к сожалению - не знаю на какой сайт заказчик прикрутил в итоге.

Answer 2

[Сергей]

Вот описан процесс разработки этой штуки =)

Answer 3

[Алексей]

Где вы там 3D увидели?
Обычный 2D параллакс.
Например стакан, помещается в руку, а на самом деле - между двух картинок: dairyculture.ru/local/images/sliding-page4/hand-ba... и dairyculture.ru/local/images/sliding-page4/hand-fi...