Spinner

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

Далее подключаем библиотеку Propeller и пишем сценарий с указанием нужных свойств.

// CSS
<style>
    .spinner{
        width: 500px;
        height: 500px;
        background: url(spinner.png) no-repeat;
    }
</style>

// JS
<script src="jquery.min.js"></script>
<script src="propeller.min.js"></script>

<script>
  $("#spinner").propeller({inertia: 0.99});
</script>

Демо

Вращать можно мышкой и пальцем на экранах телефонов под Android и iOS.

Реклама