Нужно написать js скрипт
Приветствую!
Мы хотим сделать персонаж для сайта http://coma.net.ua/, который будет появляться время от времени на странице, показывать какую-то анимацию и исчезать. Персонаж - запятая с глазами и руками (как в старом MS Office скрепка).
Пример реализации - http://esquire.ru/potd/10122013 (если прокрутить страницу до комментариев, то на комментарии с большим количеством минусов "прилетит" муха). У нас всё намного проще - персонаж просто должен появится на странице в определенном месте, а потом исчезнуть. Но анимацию будем реализовывать также т.е. быстрой заменой background-position. Вот картинка мухи из примера - http://esquire.ru/static/fly/fly3.png.
Нужно написать скрипт который:
1) Будет делать анимацию т.е. замену background-position (дизайнер картинку будет рисовать уже когда скрипт будет готов, поэтому нужно показать, где в скрипте можно изменять скорость замены).
2) Будет появляться на странице через некоторое время в одном из 4-х мест (рандомно):
2.1) Возле кнопки "мне нравится" от ФБ сверху страницы, если у пользователя эта область видна на экране (т.е. ещё не проскролил вниз).
2.2) Возле блока "порада дня". Также в том случае если пользователь не проскролил вниз.
2.3) В правом нижнем углу страницы, fixed.
2.4) В правом нижнем углу страницы, fixed.
*для пунктов 2.1 и 2.2. будет только одна анимация (см. ниже 5.1), для пунктов 2.3 и 2.4 рандомно должен показываться один из возможных вариантов (см. ниже 4.1-4.6).
3) Будет пропадать через несколько секунд (по разному в зависимости от анимации).
Всего планируются такие анимации:
4) Просто появляется и
4.1) Моргает
4.2) Машет рукой "привет"
4.3) Подмигивает
4.4) Улыбается закрыв рот рукой
4.5) Показывает язык
4.6) Ходит влево вправо (если это не слишком сложно будет для дизайнера)
5) Появляется и
5.1) Тыкает пальцем вверх вправо (можно будет подставить и к FB и к совету дня)
5.3) Появляется, подносит руку к "бороду" (задумывается) и над головой появляется облако с белым фоном, на фоне которого будет написана какая-то цитата.
Но с этим уже будет работать дизайнер. Ваша задача сделать так, чтобы для каждой анимации можно было поставить свою продолжительность показа.