@tim_tairan
web

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

Что бы понять о чём я буду писать ниже вот скришот для ознакомления с задачей 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 и друзья молча делают удивлённые глаза :)
  • Вопрос задан
  • 495 просмотров
Решения вопроса 1
@tim_tairan Автор вопроса
web
Всем спасибо, все свободны :)
Решение нашёл сам, и так мы делаем в css нужному нам элементу к примеру div -webkit-clip-path: polygon (нужные нам координаты). Но оно не работает в firefox... МЫ берём следующий скрипт https://github.com/andrusieczko/clip-path-polygon. И ура! Всё работает как нам надо пропорции сохраняются т.к. данные заданы в процентах, а скрипт пересчитывает их.
А вот анимировать уже не тяжело, разберётесь)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
И снова спрошу: Что же не получается?)
Ответ написан
Ваш ответ на вопрос

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

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