doper

Dom Wrapper

What is this tool for ?

With this tool, you can manipulate the position/rotation/scale of dom element with a much easy way. Including:

• x
• y
• width
• height
• scale
• scaleX
• scaleY
• rotation
• pivot
• minAnchor
• maxAnchor
• parent
• html
• css

and many more...

All the attributes are behave separately, and auto refreshs the dom correspondingly while you assigning them. Much like a UGUI way to control your dom elements. Works perfectly with other animation libraries (e.g. tween)

Examples

let node = doper('<div>Hello World!</div>', '.container');

node.parent.style.position = 'relative';
node.style.backgroundColor = '#789';

// 居中
node.minAnchorX = 0.5;
node.maxAnchorX = 0.5;
node.minAnchorY = 0.5;
node.maxAnchorY = 0.5;

function update() {
	node.rotation++;
	node.y = Math.sin(node.rotation * 0.05) * 100;
	requestAnimationFrame(update);
}

update();

Result: