Работа с сложными фигурами(элементами), есть идеи?

Question

[tim_tairan]

Что бы понять о чём я буду писать ниже вот скришот для ознакомления с задачей c2n.me/3gF4B4g.jpg

И так задача следующая:
У нас есть 2 элемента background #1 и background #2 они наезжают на изображение MAIN IMAGE, по клику на "CTC MEDIA" они разъезжаются background #1 вверх и background #2 вниз и изображение остаётся одно на "сцене".

Что же не получается сделать спросите Вы?!
А следующее:
Кривые формы у background #1 и background #2, с учётом того что это не img и не background, а фон реализованный при помощи geometryangle.js с данным скриптом вы так же можете ознакомиться тут www.jqueryscript.net/other/jQuery-Plugin-To-Create...
Скрипт "рендерит" 3-мя способами svg / canvas / webgl, я в свою очередь выбрал canvas т.к. он даёт самую минимальную нагрузку.
В html выглядит это так: c2n.me/3gF7jcR.png (пример одного из background ).

Что я пробовал:
1. Маска CSS clip-path (но не подходит не работает в мазиле и опере)
2. SVG clip-path (canvas контейнер не хочет реагировать на её)

И так дорогие друзья, может у кого то есть хоть какие то идеи, уже 3-ий день не могу ничего придумать, google и друзья молча делают удивлённые глаза :)

Comments

[Евгений Петров]

Выбирайте SVG

Answer 1

[tim_tairan]

Всем спасибо, все свободны :)
Решение нашёл сам, и так мы делаем в css нужному нам элементу к примеру div -webkit-clip-path: polygon (нужные нам координаты). Но оно не работает в firefox... МЫ берём следующий скрипт https://github.com/andrusieczko/clip-path-polygon. И ура! Всё работает как нам надо пропорции сохраняются т.к. данные заданы в процентах, а скрипт пересчитывает их.
А вот анимировать уже не тяжело, разберётесь)

Answer 2

[xmoonlight]

И снова спрошу: Что же не получается?)

Comments

[tim_tairan]

Как ограничить область видимости background c2n.me/3gFeiM5.jpg. (по аналогии как мы делаем в svg polygon)
Сейчас там 2 прямоугольных background и изображение png с такими кривыми, сделал для наглядности.
Та понятнее?)

[xmoonlight]

tim_tairan: сверху наложить svg-полигон

[xmoonlight]

tim_tairan: можно еще в кадр отрисовки встроить наложение (в сам канвас)

[tim_tairan]

xmoonlight: с cvg полигоном пробовал но не выходило.
xmoonlight: даже не представляю как реализовать для данного скрипта)

[xmoonlight]

tim_tairan: ну и я пока тоже... Надо разбираться, а это - время....

[tim_tairan]

xmoonlight: Само собой, я просто думал кто то юзал данный скрипт.

[xmoonlight]

tim_tairan: нет.. но влеплю ща под менюху на сайт себе)))

[tim_tairan]

xmoonlight: clip-path polygon не знаешь как добиться поддержки в мазиле и опере?
Это бы решило мою проблему)

[xmoonlight]

создай демку на jsfiddle.com и я попробую поколдовать

Answer 3

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

jsfiddle.net/QW01_01/7Lbku1t8/1