Check out this: http://jsfiddle.net/F8GTP/, and the final version can be found here: http://jsfiddle.net/MjnxP/.
To implement infinite scroll using WheelEvent, follow these steps:
var $cog = $('#cog'),
$body = $(document.body),
bodyHeight = $body.height(),
rotate = 1;
var wheelEvent = function (event) {
var delta = 0;
if (event.wheelDelta) { delta = event.wheelDelta/120; } else if (event.detail) { delta = -event.detail/3; }
if (delta) {
rotate += delta * 1.12; //<== Increase speed.
console.log(rotate, delta);
$cog.css({ 'transform': 'rotate(' + rotate + 'deg)'});
}
if (event.preventDefault) { event.preventDefault(); }
event.returnValue = false;
};
window.onmousewheel = wheelEvent;
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheelEvent, false); }
To detect links, use a canvas with "collision image", and here is the final version:
$cog.click(function(e) {
if (rotate !== lastrotate) {
context.save();
context.translate((image.width/2), (image.height/2));
context.rotate(rotate * Math.PI/180);
context.drawImage(image, -(image.width/2), -(image.height/2));
context.restore();
lastrotate = rotate;
}
var x = e.pageX, y = e.pageY;
console.log(x, y);
var color = context.getImageData(x, y, 1, 1).data;
if (color[0] == 255 && color[1] == 255 && color[2] == 255) {
alert("click");
}
});
// Other code for setting pixel and working with canvas
Ensure to use your own domain image for "image.src" or convert it to Base64 to avoid security errors. You can use this tool to convert image to Base64: .
If the position of the cog is not at (0, 0), adjust the code accordingly:
var x_pos = 200, y_pos = 200;
var x = e.pageX - x_pos, y = e.pageY - y_pos;