Skip to content

obeyCursor is a jQuery widget that can make able every DOM object (slaveObject) to follow the cursor

License

Notifications You must be signed in to change notification settings

eclectic-boy/obeyCursor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

#obeyCursor

obeyCursor is a jQuery widget that can make able every DOM object (slaveObject) to follow the cursor.

##Examples

A base example http://codepen.io/eclectic_boy/pen/xGmBWN

A more complex example http://codepen.io/eclectic_boy/pen/Jdwzvg

Something pretty oldstyle and fancy, "Cards"! http://codepen.io/eclectic_boy/pen/qdLvxe

##Requirements

#Usage

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/obeyCursor.js"></script>

<script type="text/javascript">
$(function() {
	$("#slave").obeyCursor(opts);
});
</script>

<div id="slave"></div>

#Options

An optional options object opts can be passed to the widget. Here follow the available options:

###anchorX Horizontal position of the slaveObject anchor point. The value is the shifting from the left border of the slaveObject expressed in percentage of the width. Default to 50. Optional.

http://codepen.io/eclectic_boy/pen/OVrqEm

###anchorY Vertical position of the slaveObject anchor point. The value is the shifting from the top border of the slaveObject expressed in percentage of the height. Default to 50. Optional.

http://codepen.io/eclectic_boy/pen/OVrqEm

###step(me, position) A function which is called at every step (i.e. every time the slaveObject moves). Optional.

This function can change the behaviour of the widget for the current step by changing the ending coordinates hence the movement of the slaveObject. It receives the following parameter:

  • position: it is an object like { top: <float>, left: <float> }, top is the ending vertical top position, left is the ending horizontal position.

This function must return an object like the position parameter. If false is returned the movement for the current step is prevented.

function step(me, position) {
	//change position here
	return position;
}

http://codepen.io/eclectic_boy/pen/yNGwEq

#Methods

###start()

enables the widget.

$("#slave").obeyCursor("start");

###stop()

disables the widget.

$("#slave").obeyCursor("stop");

###get_anchorX_px()

returns the anchor point X in pixels.

var anchorX_px = $("#slave").obeyCursor("get_anchorX_px");

###get_anchorY_px()

returns the anchor point Y in pixels.

var anchorY_px = $("#slave").obeyCursor("get_anchorY_px");

#Changelog

###v1.1

  • Added methods get_anchorX_px and get_anchorY_px.

###v1.0 First release

About

obeyCursor is a jQuery widget that can make able every DOM object (slaveObject) to follow the cursor

Resources

License

Stars

Watchers

Forks

Packages

No packages published