Skip to content
Browse files

integrated super smooth multiple mouse on the homepage by @stagas

	new file:   contrib/mouseCursor2.html
	modified:   index.html
  • Loading branch information...
1 parent 5da529b commit e730a5aa0ccd1f944a143d2066418ad855fb3613 @jeromeetienne committed Apr 3, 2011
Showing with 145 additions and 0 deletions.
  1. +81 −0 contrib/mouseCursor2.html
  2. +64 −0 index.html
View
81 contrib/mouseCursor2.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+<style>
+html, body {
+ height:100%;
+ width:100%;
+}
+body {
+ padding:0;
+ margin:0;
+}
+.cursor {
+ position : absolute;
+ width : 24px;
+ height : 24px;
+ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAB3RJTUUH1wYXBxAQ01sIAQAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAT1SURBVHja7VZLSFxnFD4zOqPjOxqbOqNRfEUTrVQLBaHBghA0ER9BpHSnqAu7kWQhSlK0UrCUunUhriyCYhvUhY+gImpQic9WZBqjUaPGGcfXOA9nnNvvXO8EGywdjd154GPu3Lnz/9//ne+cc4mI5EDgzZs3v6qpqflxf39/z+FwCIeHh6sjIyPfPX36VNPU1OSRlpYmo/8heFEPICY0NDS1v7+/EkTCQYAEQSB3d3fH7u5uV0dHxw8HBwd/+fv7G4uKio4vk4Ab4AfEYfG4kpKSu56enqry8nLq7u6muLg4WXBw8K3ExMSHgYGB5uHh4eWCggKbt7f38fz8/KUQYPkVgMpmsynX19cN+KStrS1qbW2le/fuUWNjI5nN5qDo6OifQOxXEPoShK719fW5XZYCnAK1UqlUp6amhsTExITy6V68eEF7e3s0NDREODnhviwsLCwCqjxEmuRIy6sHDx7Y8P14fHxc+BgFbMDh0dGRdWFhQSeXyyk+Pp7c3NzIbrcTzEijo6OUl5dHT548IZ1O56vRaKoePXr0++3bt7+GIoFIl/vHKMAkrgEalUrllZ+fn8wmbGlpIYvFIj50fHxMIEgzMzPU2dlJ2JRiY2NZrbyoqKgA3NNmZGRYMzMz7T09PedWgz0Qh5OXRkRE/IITmjc2NgS1Wi3IZDJe7B9QKBSCr6+vkJOTI0xOTgpGo1FAqrQDAwPfVFdXf9LQ0KCkk+pyWQEOFcpOA3dfz83NjQ4ICPB7/vw5ra2tEatxOvg7p2ZpaYna29vF66SkpKDIyMgc+EEzMTExc//+fSOUcKlc5dLJWGsjZLatrq7qnT5AHzjzT0yC0wO1qK6ujrKysmhwcNANpfwton56ejrYVRXk0qcVOLBarUdarVZ/2ojvpcI15BfBvzu9YTKZaHZ2lgoLC6mtrY2g3l2UswY/K8+jgLMSLFhs6ywF+Lq0tJTS09MJJyU0LJEU32dSkJ9QFazKNgj4S976z3DuYOcUoAmZxsbG9JDYAYfLeWEYUWzLvBnuiaW4uLhIzc3N1NXVRTAklZWViWWKdm3A7Him1+vtrprQSYANY4KkJjjaajAYdvz8/ILCw8NpZ2dHlJpJcIdEqVJCQoKttrZW8fjxY/H0UMOBKniJzYc2NzdfoXfoJFVdJsBWNzmNCAm3kcsglnVubk4kwMZbWVkRr9EFR0HSis4Zg+ftKL2x3t7eN1DgLcz5J9ZZB47OQ8BpRJHA69ev9Xfu3IllApxjng+cAlaDU4LB5FtZWTkF086BmA2fe9j4DchpscYysCt5y2UCwikCFswCXXZ2tmgqNhtvmpycTFVVVWIFwAMbSJUOTciI/+wDq8AS8A4wS4qeywPvjQgCZgyXd9hIwKYyNh4aC2FUMxkBg2mqvr5+EA2I5/GmRMAAHEhrXHgwcdncwmlLQkJCfl5eXjbATM5WK8AXBxUVFb/duHHjex8fn1w8GwZ40kk3vfDb0ocznUfzpyARhHreSUlJ0Xh4eCimpqYWiouLn6G9avHK9gr5/gPPvZXS5rLcZ4Xsg2t+O/oc8n/h5eUVjNmg5OGDDS3oeFt4MdGiHNloG3RSNReW+ywCHOwJNfAZEAl40Uk9s7kW6cTh29K9j978LAL8nXv4dU4F4CPJrJNwSCdN69Li38zD3lBIinCOj6SNL+XUV3EVV3EVp+NvS2d/EQYPBEcAAAAASUVORK5CYII=");
+}
+</style>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+<script src="https://github.com/jeromeetienne/EasyWebsocket/raw/master/easyWebSocket.min.js"></script>
+<script>
+
+jQuery(function() {
+var socket = new EasyWebSocket("ws://cursors/moving/smooth")
+ , me = Math.floor(Math.random() * 1000000).toString(32)
+ , cursors = {}
+ , tail = [];
+
+cursors[me] = jQuery('<div/>').attr('id', me).addClass('cursor').appendTo('body');
+
+socket.onopen = function() {
+ setInterval(function(){
+ if( mouseCurX == mouseOldX && mouseCurY == mouseOldY ) return;
+ socket.send(me + ' ' + tail.join(' '));
+ tail = [];
+ mouseOldX = mouseCurX;
+ mouseOldY = mouseCurY;
+ }, 100)
+}
+
+socket.onmessage = function(event) {
+ var data = event.data.split(' ')
+ , id = data.shift();
+
+ if (id === me) return
+
+ if (typeof cursors[id] === 'undefined') {
+ cursors[id] = jQuery('<div/>').attr('id', id).addClass('cursor').appendTo('body');
+ }
+
+ var inc = 0
+ , mul = Math.floor(100 / (data.length || 1));
+ data.forEach(function(xy) {
+ inc++;
+ setTimeout(function() {
+ xy = xy.split(',');
+ cursors[id].css({ left: xy[0] + 'px', top: xy[1] + 'px' });
+ }, mul * inc);
+ })
+}
+
+var mouseCurX = 0;
+var mouseCurY = 0;
+var mouseOldX = 0;
+var mouseOldY = 0;
+
+$('body').bind('mousemove', function(e){
+ mouseCurX = e.pageX;
+ mouseCurY = e.pageY;
+ tail.push([ mouseCurX, mouseCurY ]);
+ cursors[me].css({ left: mouseCurX + 'px', top: mouseCurY + 'px' });
+})
+
+})
+</script>
+
+</head>
+<body>
+</body>
+</html>
View
64 index.html
@@ -129,6 +129,70 @@
under <a href="https://github.com/jeromeetienne/EasyWebsocket/raw/master/MIT-LICENSE.txt">MIT license</a>.
</p>
</div>
+
+ <!-- multiple mouse cursor by @stagas -->
+ <style>
+ .cursor {
+ position : absolute;
+ width : 24px;
+ height : 24px;
+ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAB3RJTUUH1wYXBxAQ01sIAQAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAAT1SURBVHja7VZLSFxnFD4zOqPjOxqbOqNRfEUTrVQLBaHBghA0ER9BpHSnqAu7kWQhSlK0UrCUunUhriyCYhvUhY+gImpQic9WZBqjUaPGGcfXOA9nnNvvXO8EGywdjd154GPu3Lnz/9//ne+cc4mI5EDgzZs3v6qpqflxf39/z+FwCIeHh6sjIyPfPX36VNPU1OSRlpYmo/8heFEPICY0NDS1v7+/EkTCQYAEQSB3d3fH7u5uV0dHxw8HBwd/+fv7G4uKio4vk4Ab4AfEYfG4kpKSu56enqry8nLq7u6muLg4WXBw8K3ExMSHgYGB5uHh4eWCggKbt7f38fz8/KUQYPkVgMpmsynX19cN+KStrS1qbW2le/fuUWNjI5nN5qDo6OifQOxXEPoShK719fW5XZYCnAK1UqlUp6amhsTExITy6V68eEF7e3s0NDREODnhviwsLCwCqjxEmuRIy6sHDx7Y8P14fHxc+BgFbMDh0dGRdWFhQSeXyyk+Pp7c3NzIbrcTzEijo6OUl5dHT548IZ1O56vRaKoePXr0++3bt7+GIoFIl/vHKMAkrgEalUrllZ+fn8wmbGlpIYvFIj50fHxMIEgzMzPU2dlJ2JRiY2NZrbyoqKgA3NNmZGRYMzMz7T09PedWgz0Qh5OXRkRE/IITmjc2NgS1Wi3IZDJe7B9QKBSCr6+vkJOTI0xOTgpGo1FAqrQDAwPfVFdXf9LQ0KCkk+pyWQEOFcpOA3dfz83NjQ4ICPB7/vw5ra2tEatxOvg7p2ZpaYna29vF66SkpKDIyMgc+EEzMTExc//+fSOUcKlc5dLJWGsjZLatrq7qnT5AHzjzT0yC0wO1qK6ujrKysmhwcNANpfwton56ejrYVRXk0qcVOLBarUdarVZ/2ojvpcI15BfBvzu9YTKZaHZ2lgoLC6mtrY2g3l2UswY/K8+jgLMSLFhs6ywF+Lq0tJTS09MJJyU0LJEU32dSkJ9QFazKNgj4S976z3DuYOcUoAmZxsbG9JDYAYfLeWEYUWzLvBnuiaW4uLhIzc3N1NXVRTAklZWViWWKdm3A7Him1+vtrprQSYANY4KkJjjaajAYdvz8/ILCw8NpZ2dHlJpJcIdEqVJCQoKttrZW8fjxY/H0UMOBKniJzYc2NzdfoXfoJFVdJsBWNzmNCAm3kcsglnVubk4kwMZbWVkRr9EFR0HSis4Zg+ftKL2x3t7eN1DgLcz5J9ZZB47OQ8BpRJHA69ev9Xfu3IllApxjng+cAlaDU4LB5FtZWTkF086BmA2fe9j4DchpscYysCt5y2UCwikCFswCXXZ2tmgqNhtvmpycTFVVVWIFwAMbSJUOTciI/+wDq8AS8A4wS4qeywPvjQgCZgyXd9hIwKYyNh4aC2FUMxkBg2mqvr5+EA2I5/GmRMAAHEhrXHgwcdncwmlLQkJCfl5eXjbATM5WK8AXBxUVFb/duHHjex8fn1w8GwZ40kk3vfDb0ocznUfzpyARhHreSUlJ0Xh4eCimpqYWiouLn6G9avHK9gr5/gPPvZXS5rLcZ4Xsg2t+O/oc8n/h5eUVjNmg5OGDDS3oeFt4MdGiHNloG3RSNReW+ywCHOwJNfAZEAl40Uk9s7kW6cTh29K9j978LAL8nXv4dU4F4CPJrJNwSCdN69Li38zD3lBIinCOj6SNL+XUV3EVV3EVp+NvS2d/EQYPBEcAAAAASUVORK5CYII=");
+ }
+ </style>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+ <script src="https://github.com/jeromeetienne/EasyWebsocket/raw/master/easyWebSocket.min.js"></script>
+ <script>
+ jQuery(function() {
+ var socket = new EasyWebSocket("ws://cursors/moving/smooth/"+location.href)
+ , me = Math.floor(Math.random() * 1000000).toString(32)
+ , cursors = {}
+ , tail = [];
+
+ cursors[me] = jQuery('<div/>').attr('id', me).addClass('cursor').appendTo('body');
+ socket.onopen = function() {
+ setInterval(function(){
+ if( mouseCurX == mouseOldX && mouseCurY == mouseOldY ) return;
+ socket.send(me + ' ' + tail.join(' '));
+ tail = [];
+ mouseOldX = mouseCurX;
+ mouseOldY = mouseCurY;
+ }, 100)
+ }
+
+ socket.onmessage = function(event) {
+ var data = event.data.split(' ')
+ , id = data.shift();
+
+ if (id === me) return
+
+ if (typeof cursors[id] === 'undefined') {
+ cursors[id] = jQuery('<div/>').attr('id', id).addClass('cursor').appendTo('body');
+ }
+
+ var inc = 0
+ , mul = Math.floor(100 / (data.length || 1));
+ data.forEach(function(xy) {
+ inc++;
+ setTimeout(function() {
+ xy = xy.split(',');
+ cursors[id].css({ left: xy[0] + 'px', top: xy[1] + 'px' });
+ }, mul * inc);
+ })
+ }
+
+ var mouseCurX = 0;
+ var mouseCurY = 0;
+ var mouseOldX = 0;
+ var mouseOldY = 0;
+
+ $('body').bind('mousemove', function(e){
+ mouseCurX = e.pageX;
+ mouseCurY = e.pageY;
+ tail.push([ mouseCurX, mouseCurY ]);
+ cursors[me].css({ left: mouseCurX + 'px', top: mouseCurY + 'px' });
+ })
+ })
+ </script>
<!-- google analytic support -->
<script type="text/javascript">
var _gaq = _gaq || [];

0 comments on commit e730a5a

Please sign in to comment.
Something went wrong with that request. Please try again.