-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (90 loc) · 4.95 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>jquery-follow-cursor by pstrinkle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="screen">
<!-- above the fold, it is render-blocking deliberately. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/jquery.follow-cursor.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
<section class="page-header">
<h1 class="project-name">jquery-follow-cursor</h1>
<h2 class="project-tagline">jQuery plugin that causes any element to rotate following the mouse (cursor location)</h2>
<a href="https://github.com/pstrinkle/jquery-follow-cursor" class="btn">View on GitHub</a>
<a href="https://github.com/pstrinkle/jquery-follow-cursor/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/pstrinkle/jquery-follow-cursor/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h3><a id="basics" class="anchor" href="#basics" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>The Basics</h3>
<p>More to come.</p>
<p>Appears to not be perfect, will revisit later.</p>
<h3>Installation</h3>
<p>Basically just include the file.
<pre class="prettyprint lang-html">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-follow-cursor/follow-cursor.js"></script>
<canvas id='eye' height="220" width="220"></canvas>
<script>
$('#eye').followCursor();
</script>
</pre>
<h3>Demos</h3>
<canvas id='eye' height="220" width="220"></canvas>
<br />
<div style="text-align:right;">
<i id='circle' class="fa fa-circle-o-notch fa-5x" aria-hidden="true"></i>
</div>
<br />
<div style="text-align:center;">
<i id='circle2' class="fa fa-circle-o-notch fa-5x" aria-hidden="true"></i>
</div>
<script>
$(function() {
var drawArc = function() {
/* https://jsfiddle.net/patrickactivatr/s310h382/ */
var canvas = document.getElementById('eye');
var ctx = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
ctx.clearRect(0,0,canvas.width,canvas.height);
// x1, y1, x2, y2
// create a linear gradient over the line defined by the points.
var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0.0","white");
gradient.addColorStop("0.3","red");
gradient.addColorStop("0.7","red");
gradient.addColorStop("1.0","white");
ctx.beginPath();
ctx.arc(x, y, radius, Math.PI, 0, false);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = gradient;
ctx.stroke();
};
drawArc();
$('#eye').followCursor();
$('#circle').followCursor();
$('#circle2').followCursor();
});
</script>
<h3>License</h3>
<p><a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a></p>
<footer class="site-footer">
<!-- <span class="site-footer-owner"><a href="https://github.com/pstrinkle/jquery-levelup">Jquery-levelup</a> is maintained by <a href="https://github.com/pstrinkle">pstrinkle</a>.</span> -->
<a href="https://twitter.com/YammyCozonac" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @YammyCozonac</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a class="github-button" href="https://github.com/pstrinkle" data-style="mega" aria-label="Follow @pstrinkle on GitHub">Follow @pstrinkle</a>
<!-- <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span> -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</footer>
</section>
</body>
</html>