DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Colour Block Alignment with absolute position</title>
<script>
var t = 0 ;
var refresh = 24 ;
var freq = 0.33 ;
var radius = 80 ;
var centre_x = 180 ;
var centre_y = 180 ;
function onLoad() {
window.setInterval(function(){
var el = document.getElementById('animate-block');
el.style.backgroundColor = "green";
var y = centre_y + radius * Math.sin(6.3 * freq * t) ;
var x = centre_x + radius * Math.cos(6.3 * freq * t) ;
el.style.top = y + 'px' ;
el.style.left = x + 'px' ;
t += (refresh/1000)
console.log('t = ' + t) ;
}, refresh);
}
</script>
</head>
<body onload="onLoad()">
<div class='middle_container' style="background-color: purple; width:200px; height:300px;">
middle container
</div>
<div class='colourblocktest' id='animate-block' style="z-index: -1; background-color: green; width:300px; height:300px; position: absolute; left: 60px; top: 37px; ">
<div class='red' style="background-color: red; width:100px; height:100px; position: absolute; left: 200px; top: 200px">
</div>
<div class='blue' style="background-color: blue; width:100px; height:100px;position: absolute; left: 100px; top: 100px">
</div>
<div class='yellow' style="background-color: yellow; width:100px; height:100px;position: absolute; left: 0px; top: 0px">
</div>
</div>
</body>
</html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Colour Block Alignment with absolute position</title>
<script>
var t = 0 ;
var refresh = 24 ;
var freq = 0.33 ;
var radius = 80 ;
var centre_x = 180 ;
var centre_y = 180 ;
function onLoad() {
window.setInterval(function(){
var el = document.getElementById('animate-block');
el.style.backgroundColor = "green";
var y = centre_y + radius * Math.sin(6.3 * freq * t) ;
var x = centre_x + radius * Math.cos(6.3 * freq * t) ;
el.style.top = y + 'px' ;
el.style.left = x + 'px' ;
t += (refresh/1000)
console.log('t = ' + t) ;
}, refresh);
}
</script>
</head>
<body onload="onLoad()">
<div class='middle_container' style="background-color: purple; width:200px; height:300px;">
middle container
</div>
<div class='colourblocktest' id='animate-block' style="z-index: -1; background-color: green; width:300px; height:300px; position: absolute; left: 60px; top: 37px; ">
<div class='red' style="background-color: red; width:100px; height:100px; position: absolute; left: 200px; top: 200px">
</div>
<div class='blue' style="background-color: blue; width:100px; height:100px;position: absolute; left: 100px; top: 100px">
</div>
<div class='yellow' style="background-color: yellow; width:100px; height:100px;position: absolute; left: 0px; top: 0px">
</div>
</div>
</body>
</html>
No comments:
Post a Comment