1 Востаннє редагувалося Faraon (17.05.2014 22:52:08)

Тема: Рух фонової картинки при руху курсора

Привіт всіс. Виникло таке питання...
Є div блок на фоні якого знаходиться картинка (знаходиться тільки центральна частина картинки, краї сховані за блоком.) Потрібно зробити рух картинки при наведені на неї курсора. Я маю наувазі коли курсором проводим по картинці в гору то вона опускається в низ на 10px якщо проводим в право то вона рухається в ліво на 10px. не виходячи за межі блоку. Де про таке можна прочитати?

2

Re: Рух фонової картинки при руху курсора

Псевдо-псевдо приклад:

OnHover:
   background: url(/path/to/image.png) 10px 10px;
   ->
   background: url(/path/to/image.png) 20px 10px;

-> - змінюємо значення властивості в CSS.

Подякували: Faraon1

3

Re: Рух фонової картинки при руху курсора

Replace написав:

Псевдо-псевдо приклад:

OnHover:
   background: url(/path/to/image.png) 10px 10px;
   ->
   background: url(/path/to/image.png) 20px 10px;

-> - змінюємо значення властивості в CSS.

Дякую. Я щойно знайшов те що хотів, але на jQuery.
http://www.rudebox.org.ua/background-si … ax-jquery/
або
http://followdesign.com/development/201 … ast-1.html

4

Re: Рух фонової картинки при руху курсора

Я так розумію, потрібно щось на кшталт меню, як на даному сайті http://creator.biz.ua/
В допомозі будуть ефекти css3 Transitions http://www.w3schools.com/css/css3_transitions.asp

Подякували: Faraon1