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.

this should help http://stackoverflow.com/questions/10659523/how-to-get-the-exact-local-time-of-client — web-tiki, May 25 '15 at 12:02

Akshay · Answer 1 · 2015-05-25T14:01:47.733

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>

This doesn't seem to work, dunno why. Obviously even after including document.ready(), the time on local is 5.59PM, the transition's not happening. — Pre-alpha, May 25 '15 at 12:37
Between 5.50&6.30PM the color should stay at #E0DE3F (eve orange), I can't see anything wrong with your code, still dunno why the transition is not happening. — Pre-alpha, May 25 '15 at 13:39
Sorry, Still no progress. Did you try out on your own machine? — Pre-alpha, May 25 '15 at 14:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78697/discussion-between-jeevan-and-akshay). — Pre-alpha, May 25 '15 at 14:18

vals · Answer 2 · 2015-05-26T16:03:46.597

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 ...

Do you need to add `top: 0px; font-size: 60px;` in `#time`, what purpose do they serve, and can you explain the javascript you have used, I'm totally lost there. In the variables `ele`, what are you importing from `#time` and `#test`. — Pre-alpha, May 25 '15 at 19:25
@jeevan the #time element is just cosmetic to show the time. And ele are references to the DOM element (obtained from the getElementById) — vals, May 25 '15 at 20:52
But there seems to be no transition between the sun and the moon? — Pre-alpha, May 26 '15 at 06:15

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

2 Answers2