Анимация с помощью jQuery и CSS спрайтов

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

Для начала мы приведем пример без использования CSS спрайтов.

Пример без использования CSS спрайтов

Далее представлен JS код обнаружения позиции курсора мыши относительно изображения и смены классов для этого изображения.

Обновлено: Мы поправили исходники примера с учетом применения CSS спрайтов.

Скачать исходники (.zip, 286 Кб)

Теперь анимация более плавная.


2 комментарий на “Анимация с помощью jQuery и CSS спрайтов

  1. Здравствуйте, отличная статья. Спасибо.

    Подскажите, пожалуйста, как сделать ссылки в коде на свои картинки (серия картинок), расположенные на компьютере в определенной папке в этом месте (никак не получается):

    Необходимо ли еще что-то менять для анимации, когда картинки (серия картинок как в Вашем примере) лежат в папке?

    Thumb up 0 Thumb down 0

    • Путь background: url('img/luffy-front.jpg'); является относительным к css файлу.

      Например ваш css файл лежит в папке c:/1

      тогда файлы изображения согласно этому коду должны лежать в c:/1/img

      Thumb up 0 Thumb down 0

Оставить комментарий