javascript - Muuta css-tyyliä riippuen todellisesta päivä- ja yöajasta

Olen seurannut tätä opasta. Siinä animaatio muuttuu 30 minuutin jälkeen päivästä yöhön, se on todella mukavaa, pidän siitä, mutta ajattelin, miten tehdä tämä muutos todelliseen aikaan niin, että se toimii oikeassa ajassani ja vaihtaa päivän ja yön riippuen todellisesta päivästä ja yöstä. En tiedä, miten tehdä se, voisiko joku auttaa minua, tässä on koodi :-

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);
});

Vastaus #1

Sinun täytyy säätää ajoituksesi koneen nykyisen ajan mukaan. Olen tehnyt sinulle pienen esimerkin. Tämä esimerkki näyttää animaation 10 sekunnin aikavälillä. Tätä aikaväliä voidaan muuttaa kasvattamalla time_window koko päivän mittaiseksi (1000 * 60 * 60 * 24).

Perusanimointien sijaan se käyttää requestAnimationFrame-funktiota ja nykyistä aikaa. Tämä antaa sinulle suoran hallinnan animaation ja ajastuksen yli. CSS-animaatioiden asettaminen voisi olla riippuvainen suorittimen nopeudesta ja/tai poissa käytöstä olevista animaatioista, kun välilehti ei ole aktiivinen.

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>

Suorituskyky

Tämä esimerkki käyttää requestAnimationFrame-menetelmää. Kuitenkin, jos aiot liikuttaa aurinkoa 24 tunnin aikana, 60 fps:n ajaminen saattaa olla hieman liioittelua. Laitteen kuormituksen vähentämiseksi saatat haluta suorittaa vähemmän päivityksiä. Tämä voidaan saavuttaa käyttämällä setTimeout-menetelmää ja samaa rekursiivista kutsua kuin koodiesimerkissä näkyy.

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

Aurinko ei liiku niin nopeasti. Ihmiset eivät luultavasti huomaa mitään nykimistä.

Vastaus #2

yksi mahdollinen lähestymistapa on käyttää sisältösi ympärillä wrapper-diviä

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

ja sitten sinun täytyy olla jotain tällaista JavaScriptissäsi

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

Periaatteessa sen pitäisi tarkistaa aika joka tunti ja vaihtaa teema.

CSS-tiedostosi tulisi sisältää käärittyjä tyylimääritelmiä:

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

Ja tietysti, älä unohda asettaa teemaa, kun menet sivulle.