The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Magnify effect
Make elements magnify relative to current mouse position.
Useful to make nice menu or animated tag-cloud.
Examples:
/**
* new Magnify object with all default options and css properties
*/
$(".Magnify div").magnify() /**
* accessing to Magnify object methods after instantiation
* accepts 'destroy','enable','disable','options','properties' methods
*/
$(".Magnify div").magnify('options',{distance:100})
/**
* new Magnify object with all options and some css properties
*/
$(".Magnify div").magnify(
/**
* basic parameters, you can skip any of them
*/
{
/**
* max sensivity distance from mouse pointer in px
* values: integer
* default: 100
*/
distance:200,
/**
* distance calculation method
* values: 'closest', 'center', function(){}
* default: 'closest'
*/
distanceTo:'closest',
/**
* distance axis (skipping axis means any distance on it)
* values: 'x','y','xy'
* default: 'xy'
*/
axis:'xy',
/**
* you may skip some mouse events to balance smoothness/performance
* value: integer
* default: 0
*/
skipEvents:0,
/**
* do trigger magnifybefore, magnifyafter events
* values: boolean
* default: false
*/
triggerEvent:true,
/**
* magnifybefore callback (triggerEvent doesn't metter)
* values: function(){}
* default: null
*/
before:null,
/**
* magnifyafter callback (triggerEvent doesn't metter)
* values: function(){}
* default: null
*/
after:null,
/**
* ditance to delta translator
* values: 'linear','sin','cos',function(){}
* default: 'linear'
*/
delta:'linear'
},
/**
* style properties
* values: hash object like for jQuery.css()
* default: {width:'200%',height:'200%'}
* you also can pass any value as an array of stops:
* full form: [{0.25:'#CC0'},{0.5:'#FF0'},{0.75:'#F00'},{1:'#F0F'}]
* where 0.5 = 50% distance, 100% = 0px distance, 0% = max distance,
* an equivalent short form: ['#CC0','#FF0','#F00','#F0F']
* where stop=(indexOfTheStop+1)/stops.length,
* or any mix of them
*/
{
backgroundColor:[{0.9:"#FF0"},"#F00"],
width:'200%',
height:'200%',
fontSize:'200%',
borderTopColor:"#FFF",
borderRightColor:"#FFF",
borderBottomColor:"#FFF",
borderLeftColor:"#FFF"
}
);Downloads
Resources
Development
(1 vote)