Анимация на изображение при hover

FEarBG

Registered
Здравейте и за много години

Обещах на едни приятели да им помогна в създаването на сайт за една нова фирма, но те излязоха с идея за него, която не знам напълно как да осъществя.

Идеята е като се влиза в сайта да се вижда това :


И вече където е всяка цифра ще се направи анимация за мястото, която трябва да се задейства при поставяне на курсора върху нея и ще работи като линк към останалите части от сайта ("контакти", "за нас", "продукти", "цени", "магазин", "галерия").

Също беше желано при отваряне на страницата да се задейства скрипт, който да активира всички анимации в последователността от картинката, за да види потребителя, че местата не са статични.

Конкретен пример мога да дам с цифра 1, където сега има един червей. Всъшност оригиналният фон ще е с цяло ухо там и ще има някаква анимация, която показва как червея излиза от там и застава в сегашното си положение.

Проблема е, че аз имам някакви познания в HTML/CSS, обаче с JS и jQuery съм много слаб и не знам как точно да направя желания ефект.

Гледах за готови плугини, което и сега е желаната опция, но навсякъде е за елементарно анимиране на текст или за ефекти към изображение. Но не и за това, което аз търся.

Та реално аз смятам, че ми трябва някакъв плъгин, който да има ефекта Pop-up със самата анимация на определеното място и да я възпроизвежда само един път.

И чакам от вас всякакви други предположения как може да се осъществи тази идея.

Благодаря
 

Горе