Как сделать анимацию на сайте, чтобы при наводки мышкой менялась часть изображения (типо дырки в стене)?

Question

[losrogaty]

Задача такая: имеется изометрический домик типа такого:
https://cdn2.vectorstock.com/images/1000x1000/41/9...
С крышей, стенами, в формате svg.

Нужно чтобы, когда юзер наводил на часть здания, в этой части (типо x-ray) стены убирались и была видна другая картинка с интерьером. И таких мест-спотов несколько. И главное чтобы эта была анимация, а не просто ховер Он/Офф
Объясните пожалуйста примерный процесс, Я дом в люстре нарисовал, экспортировал в svg. Теперь хочется фронтэнд часть добить. Есть ли пограммы которые такое позволяют? Я знаю есть спайт программка, там чисто свг-анимация, а мне надо чтобы ховер был от юзера... Тут обойтись хтмлом5 или нужен жаваскрипт? Есть ли некие туторы по теме? Сайты с подобной реализацией?

2 Вопрос: Если иметь кнопку "Убрать Стены": то при нажатии на кнопку чтобы играла анимация. Есть ли такие пример кто-нибудь знает?

Огромное спасибо!

Comments

[Ankhena]

Рисуете в одном блоке g два варианта. Ставите классы, при наведении верхний скрываете.

[losrogaty]

Ankhena, я просто знал в свое время хтмл4.. лол Насколько помню там анимации на онховер небыло никакой, просто исчезало и появлялось. Можно задать параметр изи-ин и типо того на просто ховер?

[Ankhena]

losrogaty, https://codepen.io/teddyy/pen/yyqzLa и т.д.

[losrogaty]

Ankhena, Спасибо!

Answer 1

[Антон Усачев]

Нужен скрипт для отслеживания мышки. И две картинки. Если правильно понял мысль, то подойдет что-то вроде этого.

Comments

[losrogaty]

Спасибо! А вот еще наглость: Вы не знаете примеров с кнопкой, чтобы нажималась кнопка и здание собиралось..
Как вообще искать такое в гугле? Я с удовольствием сам бы поискал, ввожу css animation builiding button а там либо анимация кнопки либо просто хз что.
)

[Антон Усачев]

losrogaty, такую кнопку, думаю, нельзя найти. Варианта вижу 3:
1. разобрать рисунок на детали и анимировать каждую из них отдельно (css3 animation),
2. сделать спрайт и анимировать его (css3 sprite animation)
3. сделать видео и запускать его отдельным слоем в качестве анимации сборки здания (html5 video), после чего на этом месте показывать статичную картинку готового здания

во всех трех случаях нужно исходить из того, какие исходники есть в наличии и помнить, что что-то из ничего не получается.

Answer 2

[Владислав]

Тык
Не знаю как с svg, но с помощью обычного html можно разбить картинку на части и для каждой части задать свой hover.