код на двойку , если нужна пятерка тогда в раздел работа или доделай сам ))
чтоб движения было по дуге используй sin cos !!
<style>
.sun {
width: 100px;
height: 100px;
border-radius: 100px;
background: yellow;
position: relative;
}
.luna {
border-radius: 100px;
background: #fff;
width: 70px;
height: 60px;
left: 30%;
top: 0;
position: absolute;
}
body {
height: 600px;
}
#div {
width: 100%;
height: 600px;
background: blue
}
.star-five {
display: inline;
width: 10px;
border-radius: 100px;
position: absolute;
height: 10px;
background: yellow;
}
</style>
</head>
<body>
<div id="div">
<div class="sun" id="sun"></div>
</div>
</body>
<script>
var sun = document.getElementById('sun');
function animate (obj) {
var start = +new Date();
var timer = setInterval(function(){
var progress = (+new Date() - start) / 3000;
if(progress > 1) progress = 1;
obj.opts(progress)
if(progress == 1) clearInterval(timer);
}, 1000/60)
}
var width = document.body.offsetWidth;
animate({
opts: function(progress){
sun.style.left = (width) * progress + 'px';
if(progress == 1) night();
}
})
var div = document.getElementById('div');
function night () {
div.style.background = 'black';
div.style.opacity = 0;
var luna = document.createElement('div');
luna.className = 'luna';
div.appendChild(luna)
animate({
opts: function (progress) {
div.style.opacity = progress;
}
})
function dw (i) {
var dawn = document.createElement('span')
dawn.className = 'star-five'
dawn.style.left = Math.random() * div.offsetWidth + 'px';
dawn.style.top= Math.random() * div.offsetHeight + 'px';
animate({
opts: function (progress) {
dawn.style.opacity = progress;
}
})
div.appendChild(dawn)
if(i < 100) setTimeout(function(){dw(i+1)}, 100)
}
dw(0)
}
</script>