Как на js можно сделать такую абстракцию?

Question

[Виталий Киренков]

То есть несколько слоёв, в каждом из них такой фон. Есть плагин Trianglify, но у него на вскидку я не нашёл как делать маску, ибо сверху у меня фон не ровный, как в тех примерах.

Я планирую эту штуку анимировать, поэтому не хотелось бы делать простыми картинками.

Может кто встречал подобную реализацию.

Answer 1

[Юрий Лобанов]

А как планируется делать анимацию? Я правильно понимаю, как работает плагин - он исходя из параметров формирует картинку, в примере задает ее фону у body.
Как вариант, создать несколько слоев, разной высоты, плагином придется вставлять картинку не на фон слоя, а внутрь svg - только у этого способа будет полная поддержка всех современных браузеров, и каждому задать svg-маску. Если все получится так, как я себе это представляю, то можно в том числе менять и форму «зубцов».

Comments

[Виталий Киренков]

Первая здравая мысль за весь день =)) Как то не углядел, то что плагин генерирует это в фон. Буду тестить завтра.

Answer 2

[Алексей Павлов]

wagerfield.github.io/parallax не оно?

Comments

[Виталий Киренков]

Вы вопрос читали? Картинками и я могу запилить такого рода параллакс.

[Артур]

А как этот параллакс сделан?

[Виталий Киренков]

При чём тут параллакс?! Я вообще о нём в вопросе не заикался. Мне фон нужно придумал на скриптах =)

[Артур]

@DeLaVega прости, но мне интересно, как реализован этот параллакс.

[Виталий Киренков]

На том же сайте ссылка на гитхаб! Там всё.

[Артур]

@DeLaVega упс, слепой я. Простите ^^"

Answer 3

[Илья Лесных]

Возможно, вам поможет принцип цикады (один из самых популярных топиков Хабра): habrahabr.ru/post/117160

Comments

[Виталий Киренков]

Ну почему мне все пытаются подсунуть картинки =))) я Скриптом хочу. Скриптом. Статья интересная просто для прочтения, но здесь не помощник.

[Сергей Протько]

@DeLaVega либо картинки либо canvas, реализовывать это на DOM тупо, особенно если будут анимации. Это бессмысленная трата ресурсов.