Как такое сверстать и как оно должно выглядить в макете?

Question

[Shadowman69]

Есть такое чудо
Проскрольте до анимации Посейдон, и немного подождите. Может кто-то делал подобное, меня интересуют мысли так такое сверстать и как оно должно выглядить в слоях макета - волны и сам посейдон это просто разные слои или это отдельные mockup? Может кто ссылкой может поделиться на подобную реализацию.

Answer 1

[McBernar]

или это отдельные mockup?

Что это хоть значит-то — «отдельные mockup»? И почему не «otdelnie мокап»?

Это просто три отдельных слоя — фон, Посейдон и волны с кораблем. В CSS их можно разложить по оси Z на некотором расстоянии друг от друга, и для верности еще сильно размытую тень бросить на передний слой, чтобы добавить эффекта глубины.

Comments

[Shadowman69]

Словом mockup я обозначил такую штуку, которая в веб-дизайнеров и называется mockup) Например мокап руки позволяет Вам примерить татуировку, еще не делая ее, мокап смартфона позволяет посмотреть как будет выглядит Ваш мобильной дизайн, не имея смартфона и не верстая этот дизайн. Я просто не веб-дизайнер, не знаю как про другому обьяснить, дизайнеры поймут о чем я. А как они эти мокапы делают это уже я хз.
Касательно Вашего ответа, то звучит правдоподобно, теперь нужно будет найти макет чего-то подобного и попробовать) Спасибо.

[McBernar]

Нет, это не мокап. В любом случае нужно вырезать объекты, чтобы отделить их от оригинального фона — ни одна заготовка этого не умеет, очевидно. А если объекты уже вырезаны, то зачем тогда мокап? :)

[Shadowman69]

McBernar, может уже и мокапы моря придумали, чтоб разные картинки на него накладывать, все таки зритель в первую очередь воспринимает основные обьекты на картинки. а фон просто дополняет картину).
Еще интересно можно ли такое на сайте сделать, чтоб когда отходишь от компа и смотришь со стороны, то чтоб картинка обьемной выглядила? В реале уже такие картинки рисуют, а вот на сайте ли такое возможно сделать то еще наверное нет такого)

Answer 2

[Дмитрий Гончаров]

Вот тебе пример. Все очень просто.
Тык

Comments

[Shadowman69]

Спасибо)

Answer 3

[Ольга Ветер]

Отдельных слоев достаточно. Посмотрите https://html5book.ru/3d-transform/ Почти наверняка получится обойтись без JS.

Comments

[forspamonly2]

блик не получится, а параллакс - запросто

[Shadowman69]

Думаю 3D 'эффекта не выйдет, здесь думаю загвоздка в слоях макета, мне интересно как такое заложить на уровне макета, а дальше согласен, через 3D-transform и perspective можно пробовать.