— Pixels Commander

[ In English, На русском ]

Вращение HTML элементов мышью

Вращение – обыкновенная магия. Это эффект, который может превратить скучную веб страницу в куда более интерактивное пространство. Не смотря на это, вращение было обделено вниманием с момента его добавления в CSS. Propeller.js – JavaScript библиотека позволяющая вращать HTML элементы мышью или тач жестами.

Rotate elements by mouse or touch

Использование

Как jQuery плагин:

$(nodeOrSelector).propeller(options);

или библиотека без зависимостей

new Propeller(nodeOrSelector, options);

Опции

  • inertia – одна из самых ценных опций. Это число от 0 до 1. 0 значит объект перестает вращаться после того как кнопка мыли отпущена. 1 значит вечное вращение. На странице библиотеки использована inertia равная to 0.99.
  • speed – позволяет задать начальную скорость вращения. Так же может быть использовано в рантайме, как свойство объекта.
  • minimalSpeed – задает минимальную скорость вращения. Работает только при inertia между 0 и 1.
  • step позволяет задать шаг в градусах, включая тем самым режим пошагового вращения.
  • stepTransitionTime включает CSS transition для пошагового вращения. Это делает переключение между шагами плавным и позволяет использовать easing.
  • stepTransitionEasing CSS easing функция для пошагового режима с включенными transition. Тут больше про easing функции
  • onRotate коллбек выполняемый при вращении. Получить текущий угол внутри коллбека просто - this.angle.
  • onDragStart коллбек выполняемый при начале перетаскивания.
  • onDragStop коллбек выполняемый при окончании перетаскивания.
  • onStop коллбек выполняемый при окончании вращения. Работает только при inertia между 0 и 1.

Публичные свойства

  • angle текущий угол пропеллера.
  • speed текущая скорость вращения. Градусы за один кадр.

Быстродействие

Propeller использует requestAnimationFrame и рендеринг через GPU для оптимизации.
Propeller.js на GitHub


Буду рад вашим предложениям или вопросам.

  • Sonu Sindhu

    Fine nice unbelievable super :) (y)

  • http://www.techrecite.com/rotate-image-photo-or-object-around-its-axis-using-javascript-animation/ Rotate image photo picture object around its axis JavaScript animationProgramming tutorials and demos

    [...] animation of an image or object which can rotate around its axis. More demos can be found on its developer’s page. Download animation javascripttweet!function(d,s,id){var [...]

  • http://jquer.in/css3-jquery-plugins/propeller/ Propeller | javascript plugin to rotate html elements

    [...] Home Example rotate html elements [...]

  • Greg

    Very very nice!!!Excellent Job! Only one question: how can i add an event lesteren so as to get angle when rotation stops?

  • Maheedhar

    very nice…awesome. But there is a conflict to use jquery draggable, resizable options. It could be even better, if u can provide hot spots for clicking & rotating object.

  • Аноним

    Hi. Thanks! Check recent version on GitHub. There is onStop callback added it executes when rotation stops.

  • LB Deyo

    Great job on this! Question: Is there a way to set rotation? Or at least set a minimum and maximum rotation?

  • Аноним

    There is «minimalSpeed» option to set minimum speed and «speed» option to set initial speed of rotation. Maximum rotation speed is limited only by how fast is your user =)

  • LB Deyo

    I’m trying to make sure the user doesn’t rotate the object more than once, front or back. So I want to keep the object’s rotation between -360 and 360. Is that possible?

  • Аноним

    Could you drop me a message to skype lp_funky in order to clarify your needs? Sure, we can figure out correct solution.

  • alexis

    Woaw thanks for sharing this. Why does OnDragStop fires several times when I launch the propeller ?

  • Аноним

    Seems it is a bug. I rised an issue at GitHub https://github.com/PixelsCommander/Propeller/issues/4 will take a look soon.

  • Аноним

    I am not able to reproduce this. Could you drop me a link or fiddle with your project?

  • Aaron Lee

    This is awesome! But a question though, what’s the browser support like

  • Аноним

    It is IE9+, FF, Chrome, Safari, Android 2.2+, Safari Mobile. So there is support for all modern browsers.

  • Aaron Lee

    awesome. whats the fallback like in IE8 (*shivers*) and below?

  • Аноним

    I tried to add IE8 fallback using filters but it is very slow and image quality is also degrading. Microsoft dropped XP support few weeks ago so IE8 seems to be a history.

  • SL Udwig

    Is there an option like ‘handle’ planned?
    It will be nice to have an external HTML-element to controll rotation an not a whole element; because this confilcts with Drag’nDrop and other.

  • SL Udwig

    Just another feature request: an option to locate center? Can be usefull, but center of rotating elemnt ist okay.

  • Daniel Haro

    Hi, would be great if the rotation of an object could be stopped or activated by an external object, or with another events like click or over. Thanks in advance !

  • Аноним

    Is it ok for you to have .stop() method on propeller object?

  • Daniel Haro

    Yep, a stop() method would be helpful. However, To have both play () and stop () methods would be glorious. I’m having conflicts trying to combine propeller with other functions to make an element rotate, this one in paritcular:

    http://jsbin.com/ofagog/2/edit

    I really appreciate your attention, and I think you’re doing a great job with propeler.js, Greetings!

  • Simon Lopez

    hello I want to know is if propeller.js has some method to destroy the movement, also the jquery ui draggable function has the destroy

  • ME

    HI, first of all… great plugin!
    I was wondering if it is possible to trigger the function for two elements at the same time when you drag only one element.
    So what I would like to have is to drag one element and animate two elements simultaneous.

    Does your plugin support this?
    Thanks!

  • Аноним

    Hi, thanks! Glad you like it.

    To rotate two propellers in sync you may set angle property of propeller2 inside of onRotate callback of propeller1.

    onRotate: function(){
    propeller2.angle = this.angle;
    }

  • Аноним

    Hi and sorry for being late.

    There is nothing like this at the moment. Do you need this feature?

  • ME

    Hi,
    thank you so much for your quick response.
    I have tried your solution but it doesn’t seem to work.
    The one I’m dragging is is working as it should.

  • Аноним

    Actually it should works and it works. Check it out here http://pixelscommander.com/polygon/twopropellers/ and try to get difference between this page and one you made.

  • ivicajimi

    HI,
    great plugin, but I believe that destroy method is necessary. I would be very thankful if you can help me achieve this.

  • David

    How about a disable and enable to stop and start rotation?

  • Аноним

    Recent version have bind / unbind methods. Check them out.

  • Аноним

    Hi, try out bind / unbind methods from last version

  • Аноним

    Try out new version from GitHub

  • Аноним

    Try bind / unbind in most recent version

  • http://www.NickSaulino.com Nick Saulino

    Thank you so much for this. I was just wondering if there was some way of adding a count to get a running number of spins.

  • Аноним
  • ME

    Hi there, it’s ME again.
    A while ago I started working with you plugin which is great. Now, 2 months later I have been asked to make some additional features. What I like to have is to set the angle back to 0 after spinning the 360 degrees.

    Could you tell how to do this?

    Thanks!

  • Аноним

    Have you tried to set angle to 0?

    var propeller = new Propeller(…)
    propeller.angle = 0;

  • http://www.cellsignal.com/ ME

    Thanks for the suggestion.
    I have already tried setting it to 0 when the angle matches a certain value.
    This works fine except for one downside. The propellor visually spins back to 0.

  • Аноним

    But this is exactly what should happen. If you need some kind of virtual angle with displacement – create your own variable and update it inside of onRotate in any way you would like to.

  • http://www.cellsignal.com/ ME

    Hi, sorry for the late response.
    Thanks for your feedback. I guess I had the wrong expectations but your explanations makes sense.

    I have another question though… Have you found a solution for crossbrowser support yet? It’s to bad the propeller doesn’t work in firefox.

  • Аноним

    Propeller.js is compatible with all modern browsers including Firefox, Internet Explorer 9, iOS and Android. Check a console for errors. Apparently it is a problem in your code.

  • http://www.cellsignal.com/ ME

    Hi, thanks for your quick reply. I’m afraid I have to disagree with you because I tested your page in firefox and that doesn’t work either. I am using version 10.0.3

  • Аноним

    My current version is 32.0.3 seems that your one is few years behind it. Just update FF.

  • http://www.cellsignal.com/ ME

    OK so I just found out that IT needs to perform a serious update. We are using Firefox ESR. I just starting working in my current company so I didn’t look at my FF version before. I have put in a request for an update.
    Sorry about this. I found it hard to believe that someone would develop such a plugin that would not be crossbrowser compatible. I look forward to my updated browser version :-)

    Thanks again!

  • Аноним

    Hi, it is very easy to implement. Check angle onRotate and if it is moved between 360 and 0 – add one, if it moved from 0 to 360 – divide one

  • Keith

    This is awesome, thank you so much! Is there any way that the speed can be updated dynamically?

  • Аноним

    Have you tried to change .speed property?

  • hahamy

    element has a inital speed, When drag, rotate element, drag end, element remain rotate with the inital speed.
    mycode
    jQuery(«.earth-container»).propeller({inertia: 0.8, speed: 2, onDragStop : function(){
    this.speed = 1;
    }});
    but, It doesn’t work as I wished

  • hahamy

    It works now, code below
    jQuery(«.earth-container»).propeller({
    inertia: 1,
    speed:0.1,
    onDragStart:function(){
    },
    onDragStop:function(){
    var rp = this;
    setTimeout(function(){
    rp.inertia = 1;
    rp.speed = 0.1;
    }, 2000);
    }
    });

  • Stanislav Dzhus

    hi, I created round menu, based on your library.
    every button has a «href» attribute. when I click a menu button, I go to another page. but when I go back to page with my round menu and click any menu button, nothing happens. seems like click events are blocked after first click on button
    how do you think, the problem is caused by Propeller?
    thank you in advance!

  • Аноним

    Please, share the code, have to look at what is happening there.

  • Stanislav Dzhus

    I found that the problem isn’t caused by Propeller, sorry

  • Аноним

    Plugin is just cool but when i apply propellor to a div and unbind it and then add draggable to the same div then the draggabble doesnt work

  • Аноним

    Could you create issue on GitHub?

  • Аноним