Skip to content

Commit 1011431

Browse files
pstrinklepstrinkle
authored
Merge pull request #6 from pstrinkle/gh-pages
re-arranged it
2 parents d713650 + c5d38ad commit 1011431

File tree

4 files changed

+167
-2
lines changed

4 files changed

+167
-2
lines changed

‎dist/jquery.follow-cursor.js

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/**
2+
* jquery-follow-cursor - jQuery Plugin to rotate an element to follow the
3+
* cursor position.
4+
*
5+
* URL: http://pstrinkle.github.io/jquery-follow-cursor
6+
* Author: Patrick Trinkle <https://github.com/pstrinkle>
7+
* Version: 1.0.0
8+
* Copyright 2016 Patrick Trinkle
9+
*
10+
* Licensed under the Apache License, Version 2.0 (the "License");
11+
* you may not use this file except in compliance with the License.
12+
* You may obtain a copy of the License at
13+
*
14+
* http://www.apache.org/licenses/LICENSE-2.0
15+
*
16+
* Unless required by applicable law or agreed to in writing, software
17+
* distributed under the License is distributed on an "AS IS" BASIS,
18+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
19+
* See the License for the specific language governing permissions and
20+
* limitations under the License.
21+
*/
22+
(function ($) {
23+
function FollowCursor(config) {
24+
this.init(config);
25+
}
26+
27+
FollowCursor.prototype = {
28+
middleX : 0,
29+
middleY : 0,
30+
31+
//----------------------- protected properties and methods -------------
32+
/**
33+
* @protected
34+
*/
35+
constructor: FollowCursor,
36+
37+
/**
38+
* Container element. Should be passed into constructor config
39+
* @protected
40+
* @type {jQuery}
41+
*/
42+
el: null,
43+
44+
/**
45+
* Init/re-init the object
46+
* @param {object} config - Config
47+
*/
48+
init: function(config) {
49+
$.extend(this, config);
50+
},
51+
52+
handleMove: function(event) {
53+
var newY = 0;
54+
var newX = 0;
55+
var middleX = this.middleX;
56+
var middleY = this.middleY;
57+
var degrees = 0;
58+
59+
/* done together in just four quadrants. */
60+
if (event.pageY < middleY && event.pageX < middleX) {
61+
/* upper left. */
62+
newY = middleY - event.pageY;
63+
newX = middleX - event.pageX;
64+
65+
var radians = Math.atan2(newY, newX);
66+
degrees = radians * (180 / Math.PI);
67+
degrees = 90 - degrees;
68+
degrees *= -1;
69+
} else if (event.pageY < middleY && event.pageX > middleX) {
70+
/* upper right. */
71+
newY = middleY - event.pageY;
72+
newX = event.pageX - middleX;
73+
add = 0.25 * 360;
74+
75+
var radians = Math.atan2(newY, newX);
76+
degrees = radians * (180 / Math.PI);
77+
degrees = 90 - degrees;
78+
} else if (event.pageY > middleY && event.pageX > middleX) {
79+
/* lower right. */
80+
newY = event.pageY - middleY;
81+
newX = event.pageX - middleX;
82+
add = 0.5 * 360;
83+
84+
var radians = Math.atan2(newY, newX);
85+
degrees = radians * (180 / Math.PI);
86+
degrees += 90;
87+
} else if (event.pageY > middleY && event.pageX < middleX) {
88+
/* lower left. */
89+
newY = event.pageY - middleY;
90+
newX = middleX - event.pageX;
91+
add = 0.75 * 360;
92+
93+
var radians = Math.atan2(newY, newX);
94+
degrees = radians * (180 / Math.PI);
95+
degrees += 90;
96+
degrees *= -1;
97+
} else if (event.pageX < middleX && event.pageY == middleY) {
98+
/* west */
99+
degrees = -90;
100+
} else if (event.pageX == middleX && event.pageY > middleY) {
101+
/* south */
102+
degrees = -180;
103+
} else if (event.pageX > middleX && event.pageY == middleY) {
104+
/* east */
105+
degrees = 90;
106+
}
107+
108+
var $cvs = this.el;
109+
// the degrees in this transform are absolute!
110+
$cvs.css('-ms-transform', 'rotate(' + degrees + 'deg)');
111+
$cvs.css('-o-transform', 'rotate(' + degrees + 'deg)');
112+
$cvs.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
113+
$cvs.css('-moz-transform', 'rotate(' + degrees + 'deg)');
114+
}
115+
}
116+
117+
//----------------------- Initiating jQuery plugin -------------------------
118+
119+
/**
120+
* Set an element to rotate following the mouse movement.
121+
*/
122+
$.fn.followCursor = function() {
123+
var dataName = 'followCursor';
124+
125+
return this.each(function() {
126+
var el = $(this);
127+
var initialConfig = $.extend({}, el.data());
128+
config = $.extend(initialConfig, {});
129+
config.el = el;
130+
var instance = new FollowCursor(config);
131+
132+
var position = el.offset();
133+
var realWidth = el.outerWidth();
134+
var realHeight = el.outerHeight();
135+
var middleX = position.left + (el.width() / 2);
136+
var middleY = position.top + (el.height() / 2);
137+
138+
instance.middleX = middleX;
139+
instance.middleY = middleY;
140+
141+
el.data(dataName, instance);
142+
143+
$(document).mousemove(function(event) {
144+
instance.handleMove(event);
145+
});
146+
});
147+
};
148+
}(jQuery));

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<!-- above the fold, it is render-blocking deliberately. -->
1515
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
16-
<script src="follow-cursor.js"></script>
16+
<script src="dist/jquery.follow-cursor.js"></script>
1717

1818
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
1919
</head>

‎package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "jquery-follow-cursor",
3+
"version": "1.0.0",
4+
"author": "Patrick Trinkle <[email protected]>",
5+
"description": "jQuery plugin that causes any element to rotate following the mouse (cursor location).",
6+
"license": "Apache 2.0",
7+
"keywords": [
8+
"jquery",
9+
],
10+
"dependencies": {},
11+
"devDependencies": {},
12+
"scripts": {},
13+
"repository": {
14+
"type": "git",
15+
"url": "git://github.com/pstrinkle/jquery-follow-cursor.git"
16+
}
17+
}

‎follow-cursor.js renamed to ‎src/follow-cursor.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*
55
* URL: http://pstrinkle.github.io/jquery-follow-cursor
66
* Author: Patrick Trinkle <https://github.com/pstrinkle>
7-
* Version: 0.1
7+
* Version: 1.0.0
88
* Copyright 2016 Patrick Trinkle
99
*
1010
* Licensed under the Apache License, Version 2.0 (the "License");

0 commit comments

Comments
 (0)