useless
Version:
Use Less. Do More. JavaScript on steroids.
80 lines (53 loc) • 1.61 kB
HTML
<html>
<head>
<meta charset="utf-8"></meta>
<title>InertialValue test</title>
<script src="../build/useless.client.js"></script>
<script src="../build/useless.devtools.js"></script>
</head>
<style>
ball,
box {
display: block; width: 50px; height: 50px;
background: green; border-radius: 100%;
position: absolute; top: 0; left: 0; }
ball[animating] {
background: red;
}
box {
border-radius: 0;
background: green;
}
ball:after {
content: 'drag me'; position: absolute;
left: 120%;
}
</style>
<script>
$ = jQuery
document.ready (() => {
ball = N.one ('ball')
box = N.one ('box')
position = new InertialValue ({
easing: 'inOut',
duration: 0.5,
value: Vec2.zero
})
ball.$toggleAttr ('animating', position.animatingChange)
position.valueChange (p => {
box.css (p.asLeftTop)
})
$(ball).drag ({
start: function () {
return this.leftTop () },
move: function (memo, offset) {
const p = position.target = memo.add (offset)
this.css (p.asLeftTop) }
})
})
</script>
<body>
<box></box>
<ball></ball>
</body>
</html>