-
Notifications
You must be signed in to change notification settings - Fork 0
/
elementPositionManipulation.html
41 lines (33 loc) · 1.29 KB
/
elementPositionManipulation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<head>
<script>
function init() {
element = document.getElementById("element");
element.style.position = "absolute"; // relative to screen
element.style.margin = 0; // nothing on the sides for margins
element.style["font-size"] = "100px";
element.style["font-family"] = "monospace";
window.requestAnimationFrame(move); // move
}
function move(time) {
const t = String(Math.round(time / 10) / 100);
if (t.indexOf(".") === -1) {
element.innerHTML = t + ".00";
} else {
element.innerHTML = t.padEnd(t.indexOf(".") + 3, "0");
}
// make element go to the middle of the screen and wobble(x-axis)
const Xoffset = document.getElementById('element').offsetWidth
element.style.left = (50 * (Math.sin(time / 345))) + (window.innerWidth - Xoffset) / 2 + "px";
// make element go to the middle of the screen and wobble (y-axis)
const Yoffset = document.getElementById('element').offsetHeight
element.style.top = (100 * (Math.sin(time / 500))) + ((window.innerHeight - Yoffset) / 2) + "px";
window.requestAnimationFrame(move); // call update again
}
document.addEventListener("DOMContentLoaded", function(){
init(); // when the content loads then run
});
</script>
</head>
<body>
<p id="element"> This is some text. </p>
</body>