Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Возможно ли так сделать при помощи svg? (https://javascript.ru/forum/library-toolkit-framework/48725-vozmozhno-li-tak-sdelat-pri-pomoshhi-svg.html)

sweelemk 14.07.2014 16:55

Возможно ли так сделать при помощи svg?
 
Задание такое: есть логотип, он должен разворачиваться в 3 этапа при наведении. При следующем наведении на логотип, он повторяет действия. Возможно ли такое реализовать при помощи SVG? Может нужно с библиотекой порабоатать? Подскажите идею. Спасибо См. изображение.

sweelemk 14.07.2014 16:57


skrudjmakdak 14.07.2014 18:35

т.е. один блок должен выезжать и за другого?

sweelemk 14.07.2014 18:38

skrudjmakdak, должен разворачиваться. Когда лист бумаги сложить в 4 части, в потом разворачивать. Так и здесь должно быть

skrudjmakdak 14.07.2014 18:47

типо такого?
http://akatev.ru/files/public/php/slide/

сами развороты?

sweelemk 14.07.2014 18:51

skrudjmakdak,
да, только разворачиваться должен по часовой стрелке.

sweelemk 14.07.2014 18:53

и из 4-х маленьких получается 1 большой

skrudjmakdak 14.07.2014 18:57

тогда за основу можете взять мой алгоритм, только смотрите, это все дело идет на css3. т.е. в старых браузерах это работать не будет. еще один момент, я не знаю как отслеживать событие когда имага завершит свою трансформацию, для того чтобы другая начала свою трансформацию

еще видел подобную фигню на канвасе кто то писал, но опять же все на новых браузерах. вот только урлу я не помню((

sweelemk 14.07.2014 18:59

Мне достаточно новых браузеров. Спасибо!

skrudjmakdak 14.07.2014 19:01

вот нашел ссылки:
http://www.html5canvastutorials.com/...form-tutorial/
http://www.w3schools.com/tags/tryit....nvas_transform
http://www.w3schools.com/tags/canvas_transform.asp
http://www.html5canvastutorials.com/...tate-tutorial/

имхо, на канвасе будет лучше. там принцип везде один это метод transform


Часовой пояс GMT +3, время: 23:34.