Change css style depend on real day and night time

Question

I been follow this tutorial. It has animation change after 30 min to day and night its very nice I like it but I was thinking how to make this change for the real day time so its work on my real time and change day and night depend on real time day and night I don't know how to do that can any one help me please here the code :-

HTML

<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></div>

CSS

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}
#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}
#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}
#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}
#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}
#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}
#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

JS

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

Answer 1

You'll have to offset your timing by the current time on the machine. I've made a small example for you. This example shows an animation over a time window of 10 seconds. This window can be changed by increasing time_window to a full day (1000 * 60 * 60 * 24).

Instead of using the basic animations it uses requestAnimationFrame and the current time. This gives you direct control over the animation and the timing. Setting CSS animations could be subject to CPU speed and/or disabled animations when a tab is not active.

var running = true;
var time_window = 1000 * 60 * 0.1;

function runDay() {
  if (running) {
    var now = Date.now() % time_window;
    var offset = Math.sin(now * (2 * Math.PI / time_window)) * 25 + 35;
    $('.sun').css('top', offset + '%');
  }
  window.requestAnimationFrame(runDay);
}

runDay();

body {
  background-color: #55b;
}
.earth {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  background-color: #5b5;
  z-index: 3;
}
.sun {
  position: absolute;
  background-color: #bb5;
  left: 10%;
  top: 10%;
  width: 10vmin;
  height: 10vmin;
  border-radius: 10vmin;
  z-index: 2;
  s
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="earth"></div>
<div class="sun"></div>

Performance

This example utilizes the requestAnimationFrame method. Yet if you're going to move a sun over 24h, running 60fps might be a bit overkill. To go easy on ones device you might want to run less updates. This can be achieved using the setTimeout method and the same recursive call as show in the snippet.

function doRecursive() {
    setTimeout(doRecursive, 1000); // run every second
}
doRecursive();

Seeing the sun doesn't move that fast. People probably won't notice any stutter.

Answer 2

one possible approach is to have a wrapper div for your content

<div id="idDayTime" class="day">
   .... content of the page ...
</div>

and then you have to have something like this in your javascript

setInterval(function(){ 
   ... check time of day ...
   ... assign corresponding css class to the idDayTime div ...
}, 60000);

Basically it should check time every hour and change the theme.

You css should include wrapped style definitions:

.day{
  .content{
  };
};
.evening{
  .content{
  };
};

And, ofc, don't forget to to set the theme once you enter the page.

Answer 3

As the change between day and night won't happen so often, you don't need a animation.

You only need to get the browser time using JS e.g.

var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

and a if-Statements that decides which CSS should be applied, You can go for hours here.

Answer 4

The following snippet is checking the curent hour (in 24h format).

Instead of creating some day and night css class, it push some css rules at the end of the html element inline style attribute.

This way, this css rules have the highest priority against any others.

It is highly portable, no need to modify any html or css, and we can set many css rules by chaining them in one line.

 /* Day/Night style switcher */
var h = new Date().getHours()
var ds = h > 8 && h < 20
if (ds){ dayStyle();console.log("Day style") }
if (!ds){ nightStyle();console.log("Night style") }
    
function nightStyle(){
  document.documentElement.style += ";background-color:#023202;color:#00d300"
}
function dayStyle(){
  document.documentElement.style += ";background-color:white;color:#000"
}

Hello world!

Using the css filter rule provide very nice and surprising results, simply with well balanced colors:

/* Day/Night style switcher */
var h = new Date().getHours()
var ds = h > 8 && h < 20
if (ds){ dayStyle();console.log("Day style") }
if (!ds){ nightStyle();console.log("Night style") }
    
function nightStyle(){
  document.documentElement.style += ";filter:invert(1)"
}
function dayStyle(){
  document.documentElement.style += ";filter:invert(0)"
}

hello world!