1

Добрый день, подскажите, пожалуйста, как можно сделать так же как на этом сайте (http://enjoyme.ru/box/), в исходниках смотрел, что они делают это при помощи jQuery и background-position, но понять, как именно это работает я не могу. Заранее спасибо

введите сюда описание изображения

1 ответ 1

2

Заглянули бы еще глубже, нашли бы вот это:

Картинка сделана спрайтом.

Скрипт просто меняет позицию фона из спрайта.

Анимация делается с помощью setInterval()

    function updSprite() {
      var $element = $('.animated');
      var position = $element.css('background-position');
      if (position == '0px 100%') {
        position = '0 0'
      } else {
        position = '0px 100%'
      }
      $element.css('background-position', position);
    }
    setInterval(updSprite, 100);
.animated{width: 113px; height: 73px; background: #000 url("http://oi64.tinypic.com/23qyws3.jpg") no-repeat 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="animated"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.