MagicCursor.js – Get Started – Custom Options
MagicCursor.js
== Get cool cursor effects on the web ==
(C) 2014 Shintaro Seki
Get Started
Install
Download here and place the library files ("MagicCursor.js" and "MagicCursor-(ADDON).js") where you like, or via bower.
$ bower install MagicCursor.js --save
A Simple Example
<!DOCTYPE html>
<title>A Simple Example</title>
<style>
html, body { height: 100%; width: 100%; }
body { margin: 0; padding: 0; background-color: #000; }
</style>
<body>
<script src="js/MagicCursor.js"></script>
<script>
new MagicCursor().watch();
</script>
</body>
Basic Options
new MagicCursor({
// Target DOM element.
target: document.body,
// Set true in some full screen applications (ex. reveal.js).
fullScreen: false,
// CSS z-index of canvas where the cursor is drawed.
zIndex: 5000,
// FPS of animation
fps: 30,
// Duration.
duration: 1, // [s]
// jQuery-style easing function.
easing: function(x, t, b, c, d) { return x; }, # linear
});
How to Check Available Options
- Read the source code.
- Run the following command on the console.MagicCursor.Options.get("option-name")
> MagicCursor.Options.get("default")
draw: function (ctx, points, head, tail) {
duration: 1
easing: function (x, t, b, c, d) {
fillColor: Array[3]
fps: 30
fullScreen: false
lineColor: Array[3]
lineWidth: 2.5
radius: 7
...
Custom Options
Built-in Options
skeleton default"skeleton" Option
Base option of all custom options.
# Base options skeleton = # Target DOM element. target: document.body # Set true in some full screen applications (ex. reveal.js). fullScreen: false # CSS z-index of canvas where the cursor is drawed. zIndex: 5000 # FPS of animation. fps: 30 # How long each curosr point is showed. duration: 1 # [s] # jQuery-style easing function. # About easing functions: http://www.robertpenner.com/easing/ easing: (x, t, b, c, d) -> x # linear # Draw function in each frame. # - ctx: 2d context of canvas. # - points: if `head` isn't null then [tail..., head] else [tail...] # - head: The head point. [null|CursorPoint] # - tail: The tail points, [Array] draw: (ctx, points, head, tail) -> console.log "override me"
"default" Option
Default option of MagicCursor. It's implemented as one of custom options.
MagicCursor.Options.add "default",
# Custum parameters.
# These params can be refered such as `this.param` in `draw()`.
fillColor: [100, 100, 255]
lineColor: [255, 255, 255]
radius: 7
lineWidth: 2.5
# Override draw().
draw: (ctx, points, head, tail) ->
drawRadius = (p, radius, lineWidth, frgba, srgba) ->
ctx.beginPath()
ctx.lineWidth = lineWidth
ctx.strokeStyle = "rgba(#{srgba.join(',')})"
ctx.fillStyle = "rgba(#{frgba.join(',')})"
ctx.arc p.x, p.y, radius, 0, Math.PI * 2
ctx.fill()
ctx.stroke()
for p in tail
t = 1 - p.param
t = 0 if t < 0
drawRadius p, @radius*t, @lineWidth*t, \
@fillColor.concat([t]), @lineColor.concat([t])
if head
drawRadius head, @radius, @lineWidth, \
@fillColor.concat([1]), @lineColor.concat([1])
Use Custom Options
// Set the option name as first argument.
new MagicCursor("default"); // is equivalent to `new MagicCursor()`
// Override some options
new MagicCursor("default", {
fps: 15,
duration: 2,
fillColor: [255, 100, 100]
});
Create Custom Options
MagicCursor.Options.add("new-custom-option-name", {
// fps, duration, etc. are inherited from the skeleton.
customOptionValue: something,
draw: function(ctx, points, head, tail) {
console.log(this.customOptionValue);
/* draw */
}
});
Example
MagicCursor-line.coffee
MagicCursor.Options.add "line",
fps: 30
duration: 0.5
color: [255, 255, 255]
lineWidth: 2
radius: 5
draw: (ctx, points, head, tail) ->
if tail.length > 0
ctx.lineWidth = @lineWidth
ctx.strokeStyle = "rgb(#{@color.join(',')})"
ctx.beginPath()
ctx.lineTo p.x, p.y for p in points
ctx.stroke()
if head
ctx.lineWidth = 0
ctx.fillStyle = "rgb(#{@color.join(',')})"
ctx.beginPath()
ctx.arc head.x, head.y, @radius, 0, Math.PI * 2
ctx.fill()
new MagicCursor("line", {fps: 15}).watch();
Examples
Example 1
Example 2
Presentation
MagicCursor.js is suitable for presentation. This slide is just an example.