Skip to content

Latest commit

 

History

History
210 lines (169 loc) · 7.34 KB

Effects.md

File metadata and controls

210 lines (169 loc) · 7.34 KB
Raw

Effects

Kind: global class
Npmpackage:

new Effects()

Utilities for adding effects to elements
Import from ad-view 

import { Effects } from 'ad-view'

Effects.blur(obj)

Blurs a dom element.

Kind: static method of Effects

Param Type Description
obj object object containing blur arguments, see Properties for more info:

Properties

Name Type Description
obj.target element dom element
obj.amount number the level of blurriness

Example

Effects.blur({
	target: _myDiv,
	amount: 10
})

Effects.dropShadow(obj)

Adds a drop shadow to a dom element. Follows the same use specs as Photoshop.

Kind: static method of Effects

Param Type Description
obj object object containing drop shadow arguments, see Properties for more info:

Properties

Name Type Description
obj.target element dom element
obj.angle number optional NUMBER IN DEGREES for the angle at which the shadow will project. Defaults to 0.
obj.distance number optional NUMBER for how far away the shadow will offset. Defaults to 0.
obj.size number optional NUMBER for shadow radius. Defaults to 0.
obj.spread number optional NUMBER for how much extra the shadow will increase before it begins its gradient fade. Defaults to 0.
obj.color string | object optional color of shadow as a HEX STRING :"#ff0000", RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)", or an RGB/A OBJECT:{r:255,g:0,b:0} / {r:255,g:0,b:0,a:1}. Defaults to "#000000".
obj.alpha number optional NUMBER of shadow opacity, if set will overwrite color.a. Defaults to 1.
obj.inner boolean optional BOOLEAN to set the shadow as inset. Defaults to false.

Example

Effects.dropShadow({
	target:_myDiv,
	angle: 135,
	distance: 50,
	size: 20,
	spread: 10,
	color: 'rgb(90, 0, 0)',
	alpha: 0.1,
	inner: true
})

Effects.textDropShadow(obj)

Adds a drop shadow to text within a dom element. Follows the same use specs as Photoshop.

Kind: static method of Effects

Param Type Description
obj object object containing drop shadow arguments, see Properties for more info:

Properties

Name Type Description
obj.target element dom element
obj.angle number optional NUMBER IN DEGREES for the angle at which the shadow will project. Defaults to 0.
obj.distance number optional NUMBER for how far away the shadow will offset. Defaults to 0.
obj.size number optional NUMBER for shadow radius. Defaults to 0.
obj.color string | object optional color of shadow as a HEX STRING :"#ff0000", RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)", or an RGB/A OBJECT:{r:255,g:0,b:0} / {r:255,g:0,b:0,a:1}. Defaults to "#000000".
obj.alpha number optional NUMBER of shadow opacity, if set will overwrite color.a. Defaults to 1.

Example

Effects.textDropShadow({
	target:_myText,
	angle: 45,
	distance: 15,
	size: 1,
	color: '#ff0000',
	alpha: 0.5
})

Effects.glow(obj)

Adds a glow to a dom element. Follows the same use specs as Photoshop.

Kind: static method of Effects

Param Type Description
obj object object containing glow arguments, see Properties for more info:

Properties

Name Type Description
obj.target element dom element
obj.size number optional NUMBER for glow radius. Defaults to 0.
obj.spread number optional NUMBER for how much extra the glow will increase before it begins its gradient fade. Defaults to 0.
obj.color string | object optional color of glow as a HEX STRING :"#ff0000", RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)", or an RGB/A OBJECT:{r:255,g:0,b:0} / {r:255,g:0,b:0,a:1}. Defaults to "#000000".
obj.alpha number optional NUMBER of glow opacity, if set will overwrite color.a. Defaults to 1.
obj.inner boolean optional BOOLEAN to set the glow as inset. Defaults to false.

Example

Effects.glow({
	target: _myDiv,
	size: 20,
	spread: 0,
	color: 'rgb(90, 0, 0)',
	alpha: 0.5,
	inner: true
})

Effects.linearGradient(obj)

Changes the background of a given dom element to be a linear gradient.

Example
Adding a horizontal gradient from red, to blue, fading to a transparent yellow.

Effects.linearGradient({
	target: _myDiv,
	colors: ['red', 'blue', 'rgba(255, 255, 0, 0.5)'],
	angle: 90
})

Kind: static method of Effects

Param Type Description
obj object object containing gradient arguments, see Properties for more info:

Properties

Name Type Description
obj.target element dom element
obj.colors array ARRAY of colors as either a HEX STRING :"#ff0000" or an RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)".
obj.angle number NUMBER IN DEGREES of angle to draw linear-gradient at. Defaults to 0.

Effects.radialGradient(obj)

Changes the background of a given dom element to be a radial gradient.

Example
Adding a gradient from red to blue, with a very large choke on the blue.

Effects.radialGradient({
	target: _myDiv,
	colors: ['#ff0000', '#0000ff 10%']
});

Kind: static method of Effects

Param Type Description
obj object object containing gradient arguments, see Properties for more info:

Properties

Name Type Description
obj.target element dom element
obj.colors array ARRAY of colors as either a HEX STRING :"#ff0000" or an RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)".

To add stops, append a % value to the color string: ["#ff0000 50%, "#00ff00 90%"].
obj.angle number NUMBER IN DEGREES of angle to draw linear-gradient at. Defaults to 0.