Both reasons why I've left out click events, as opposed to the earlier scripts. They also respond much quicker to mouse wheel events than the original demo. The cogs are "flickable", making them progress at the speed that the user gives them - then stop again when clicking. The wheel is made up of individually rotated elements around the x-axis, creating a basically infinite decagon without the need for prepending or appending elements:
HOW TO FLIP WHEEL 3DSIMED UPDATE
The latest evolution of the script can be found here :įinal update - a 3d version that uses transition instead of jQuery. It will populate the numbers automatically so there's no need to write the markup. webkit-tap-highlight-color: transparent Up ? hook.eq(0).appendTo(aim) : hook.eq(9).prependTo(aim) If (document.readyState = 'complete') interAction() Ĭog.scrollTop(base).fadeTo(0,1).mousewheel(function(turn, delta), term, revolveTooth) Just a basic parent and styling with spans for each number, a few prepended in case of going up. You could use a CDN, this version also works for IE8- : įor the best cross browser support on using the mousewheel, this plugin was included : The library has great cross browser support (that's it's strength actually), all it needs is a link to it for the JavaScript to be able to get executed. Didn't use the plugin I linked to in the comments or requestAnimationFrame but jQuery animate() is quite a good tool for this. No special perspective style (yet) but I thought it looked quite decent as is. works with the mousewheel, swiping and clicking on the top and bottom numbers. Here's what I put together from the info provided.
HOW TO FLIP WHEEL 3DSIMED HOW TO
I've seen this question: HTML5/CSS3 - how to make "endless" rotating background - 360 degrees panorama but I'm unsure if the answers are applicable to my project as they don't seem to be interactive.Īs user ByteHamster's answer is over 3 years old, I was wondering if there’s a better way to achieve this effect with a html5 animation? And am I correct in thinking that the Javascript in the example would make it not work on some devices/browsers that don’t have Javascript enabled? Would a html5 approach be the best way to ensure the effect works on most devices/browsers? Would this require using 3d interactive animation software? I was wondering if it’s possible to do something similar to this but instead of having an image moving up and down, can it be turned into a number wheel? By that I mean, in the example above, the scrolling stops in one direction once the number reaches 0, I’m wondering if it’s possible to create a wheel, where a user could constantly spin it from top to bottom, or bottom to top if they wished to do so. The animation allows the user to scroll through the numbers by clicking above or below the selected number on screen, and the selected number is shown in a div below the animation. My question is about an answer given by user ByteHamster here: How to create JavaScript/HTML5 Spinner List with images? in the answer he/she gives an example of how to create a scrolling animation with html, css and Javascript.