WEB: Верстка/Программинг – анимация секторов круга
Задача:
1. В круге с диаметром 560px находится 3 сектора по 120 градусов каждый. (см. скриншот)
- должна быть возможность в каждый сектор вставить (изменить) изображение.
2. При наведении на сектор или на указатель сектора, сектор должен увеличиваться и выходить за границы круга. (см. скриншот)
3. При клике на сектор или указатель сектора, круг должен смещаться:
– клик по левому сектору приводит к смещению круга в правое крайнее положение и слева должен появиться блок с контентом; (см. скриншот)
– клик по правому сектору приводит к смещению круга в левое крайнее положение и справа должен появится блок с контентом;
– клик по нижнему сектору приводит к смещению круга в верхнее крайнее положение и внизу должен появиться блок с контентом;
4. При закрытии блока с контентом (клик на "крестик" блока) круг должен возвратиться в первоначальное состояние.
5. В крайнем левом (правом или нижнем) положении активный сектор должен быть выделен, неактивные сектора затемнены. (см. скриншот)
6. При клике на неактивный сектор в крайнем левом (правом или нижнем) положении круг должен сместиться через центр в конечное положение выбранного сектора.
6.1. Пример:
– выбран правый сектор -> круг находится в крайнем левом положении;
– кликаем на левый сектор -> круг через центр смещается в крайнее правое положение;
6.2. Пример:
– выбран правый сектор -> круг находится в крайнем левом положении;
– кликаем на нижний сектор -> круг через цент смещается в крайнее верхнее положение;
Нужен тот, кто готов сделать такую анимацию на СSS.
Озвучивайте сроки и стоимость.