Adding a day/night cycle for scrolling clouds with smooth color transitions

Question

I have got the scrolling clouds but I need a dawn/dusk and day/night cycle by detecting the system clock. I'm not sure how to detect system time with html or css.

I tried transitions with a delay but its not working.

* {
  margin: 0;
  padding: 0;
}
body {
  overflow: hidden;
}
#clouds {
  padding: 100px 0;
  background: #c9dbe9;
  background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
  width: 200px;
  height: 60px;
  background-color: #fff;
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  position: relative;
}
.cloud:before,
.cloud:after {
  content: '';
  position: absolute;
  background: #fff;
  width: 100px;
  height: 80px;
  position: absolute;
  top: -15px;
  left: 10px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}
.cloud:after {
  width: 120px;
  height: 120px;
  top: -55px;
  left: auto;
  right: 15px;
}
.x1 {
  left: -250px;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
  -webkit-animation: moveclouds 120s linear infinite;
  -moz-animation: moveclouds 120s linear infinite;
  -o-animation: moveclouds 120s linear infinite;
}
.x2 {
  right: 70px;
  top: -100px;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0.7;
  -webkit-animation: moveclouds 140s linear infinite;
  -moz-animation: moveclouds 140s linear infinite;
  -o-animation: moveclouds 140s linear infinite;
}
.x3 {
  left: -550px;
  top: -200px;
  -webkit-transform: scale(0.4);
  -moz-transform: scale(0.4);
  transform: scale(0.4);
  opacity: 0.8;
  -webkit-animation: moveclouds 150s linear infinite;
  -moz-animation: moveclouds 150s linear infinite;
  -o-animation: moveclouds 150s linear infinite;
}
.x4 {
  left: 400px;
  top: -250px;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.75;
  -webkit-animation: moveclouds 100s linear infinite;
  -moz-animation: moveclouds 100s linear infinite;
  -o-animation: moveclouds 100s linear infinite;
}
.x5 {
  left: -750px;
  top: -250px;
  -webkit-transform: scale(0.47);
  -moz-transform: scale(0.47);
  transform: scale(0.47);
  opacity: 0.8;
  -webkit-animation: moveclouds 110s linear infinite;
  -moz-animation: moveclouds 110s linear infinite;
  -o-animation: moveclouds 110s linear infinite;
}
@-webkit-keyframes moveclouds {
  0% {
    margin-left: 1000px;
  }
  100% {
    margin-left: -1000px;
  }
}
@-moz-keyframes moveclouds {
  0% {
    margin-left: 1000px;
  }
  100% {
    margin-left: -1000px;
  }
}
@-o-keyframes moveclouds {
  0% {
    margin-left: 1000px;
  }
  100% {
    margin-left: -1000px;
  }
}

<div id="clouds">
  <div class="cloud x1"></div>
  <div class="cloud x2"></div>
  <div class="cloud x3"></div>
  <div class="cloud x4"></div>
  <div class="cloud x5"></div>
</div>

What I'm trying to achieve:

At 5.30PM (as on local system): transition from #c9dbe9 to #E0DE3F

At 6.30PM : transition from #E0DE3F to #323232

At 5.30AM : transition from #323232 to #E0DE3F

At 7.00AM : transition from #E0DE3F to #c9dbe9

Please check out the demo above, a similar demo would be greatly appreciated, a single transition detecting the system time would be enough, I'll take care of the rest.

Also, is it possible to loop the cloud animation again before all the clouds have floated past the screen? There's a gap where the animation waits till all the clouds have floated past the screen, before starting up again.

Akshay · Accepted Answer

Try this

var dt=new Date();
var h=dt.getHours();
var m=dt.getMinutes();
var time=h+':'+m
if(h == 17){
    if(m > 30){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,  #E0DE3F 0%, #fff 100%)'
    })
}
}
else if(h > 17){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,  #E0DE3F 0%, #fff 100%)'
    })
}
else if(h == 18){
    if(m > 30 ){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,  #323232 0%, #fff 100%)'
    })
}
}
else if(h > 18){
     $('#clouds').css({
        background:'-webkit-linear-gradient(top,  #323232 0%, #fff 100%)'
    })
}
else if(h == 5){
    if(m >= 30){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,  #E0DE3F 0%, #fff 100%)'
    })
}
}
else if(h > 5 && h < 17){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,  #E0DE3F 0%, #fff 100%)'
    })
}
else if(h == 6){
    if(m >= 30){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,   #c9dbe9 0%, #fff 100%)'
    })

    }
}
else if(h >6 && h < 17){
    $('#clouds').css({
        background:'-webkit-linear-gradient(top,   #c9dbe9 0%, #fff 100%)'
    })
}

*{ margin: 0; padding: 0;}

body {
	overflow: hidden;
}

#clouds{
	padding: 100px 0;
	background: #c9dbe9;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}

.cloud {
	width: 200px; height: 60px;
	background-color: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.cloud:before, .cloud:after {
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

.x1 {
	left: -250px;

 	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);

	-webkit-animation: moveclouds 120s linear infinite;
	-moz-animation: moveclouds 120s linear infinite;
	-o-animation: moveclouds 120s linear infinite;
}


.x2 {
	right:70px; top:-100px;
	
 	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0.7; 	

	-webkit-animation: moveclouds 140s linear infinite;
	-moz-animation: moveclouds 140s linear infinite;
	-o-animation: moveclouds 140s linear infinite;
}

.x3 {
	left: -550px; top: -200px;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
	opacity: 0.8; 
	
	-webkit-animation: moveclouds 150s linear infinite;
	-moz-animation: moveclouds 150s linear infinite;
	-o-animation: moveclouds 150s linear infinite;
}

.x4 {
	left: 400px; top: -250px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.75;
	
	-webkit-animation: moveclouds 100s linear infinite;
	-moz-animation: moveclouds 100s linear infinite;
	-o-animation: moveclouds 100s linear infinite;
}

.x5 {
	left: -750px; top: -250px;
	
	-webkit-transform: scale(0.47);
	-moz-transform: scale(0.47);
	transform: scale(0.47);
	opacity: 0.8;
	
	-webkit-animation: moveclouds 110s linear infinite;
	-moz-animation: moveclouds 110s linear infinite;
	-o-animation: moveclouds 110s linear infinite;
}

@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clouds">
	<div class="cloud x1"></div>
	<div class="cloud x2"></div>
	<div class="cloud x3"></div>
	<div class="cloud x4"></div>
	<div class="cloud x5"></div>
	</div>

vals · Answer

You can set a standard CSS animation, and then sync it with the clock using animation delay.

The delay that you need to set is equal, in negative, to the amount of time that has elapsed.

Since showing this on a day basis is quite boring, I have set an example that cycles in one minute, so it is using the seconds. To show that it is accurate, I am showing also the current second on the demo

window.onload = function () {
    var date = new Date();
    var sec = - date.getSeconds();
    var ele = document.getElementById ("test");
    ele.style.animationDelay = sec + 's'; 


setInterval ( function () {
    var date = new Date();
    var ele = document.getElementById ("time");
    ele.innerText = date.getSeconds();
}, 1000);
  
}

#test {
  background: radial-gradient(circle at 4% 4%, yellow 30px, transparent 25px),
  radial-gradient(circle at 4% 92%, white 30px, transparent 25px),
  linear-gradient(to top, black 0%, gray 20%, orange 40%, orange 60%, lightblue 80%, blue 100%);
  background-size: 2000% 2000%;
  background-repeat: no-repeat;
  background-position: 0% 0%;
  height: 200px;
  width: 300px;
  animation: anim 30s infinite alternate;
}


@keyframes anim {
    0% {background-position: 0%  100%;}
  100% {background-position: 0%  0%;}
}

#time {
  width: 200px;
  height: 100px;
  left: 400px;
    position: absolute;
    top: 0px;
    font-size: 60px;
}

<div id="test"></div>
<div id="time"></div>

The second 0 is midnight, and the second 30 is noon.

And there is the sun and the moon, too ...

Adding a day/night cycle for scrolling clouds with smooth color transitions

Tags:

javascript

html

jquery

css

Pre-alpha

2 Answers

Akshay

vals

Recent Activity

Donate For Us

Adding a day/night cycle for scrolling clouds with smooth color transitions

Tags:

javascript

html

jquery

css

Pre-alpha

2 Answers

Akshay

vals

Related questions

Recent Activity

Donate For Us