Анимиран фон означаваjQuery или „Хей, това е страхотно! Като Flash! »

Същността на описания тук метод се състои в промяна на позицията на фона на елементите. Въпреки това, въпреки цялата си гъвкавост, jQuery се бори с преместването на фона, поради факта, че изисква промяна на две стойности (вертикална и хоризонтална позиция на фоновото изображение) едновременно. Джонатан намери изход с помощта на плъгина Background-Position Animations (неговата версия трябва да е поне 1.0.2 - по-ранните не поддържат отрицателни и десетични стойности).

След като зададете началната позиция на фона: , анимацията започва при преминаване на мишката и излизане на мишката.

Джонатан посочва, че докато jQuery има метод за задържане (който включва и двете събития), е по-удобно да се обработват отделно събитията за задържане и преместване за строг контрол върху изпълнението. По този начин скриптът предотвратява повторното възпроизвеждане на анимацията, когато курсорът се задържи многократно.

Спрайт (този в bg.jpg )

В този случай анимацията ще се появи чрез промяна на позицията на фона отляво надясно. Изборът на картина е изцяло в сферата на фантазията на конкретен разработчик. Всяка нова версия на спрайта води до нов интересен ефект.

Друг пример:

това
В същия случай "преместване" се появява вертикално. В същото време, колкото по-плавен е преходът между цветовете на изображението, толкова по-малко забележимо ще бъде движението като такова. Съответно, ефектътизбледняванеще бъде по-мек (вижте Пример C: Избледняване 1-цвят).

Свързани връзки (ресурси на английски)

И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".