Skip to content

Instantly share code, notes, and snippets.

@384400

384400/-time-design.md

Last active April 16, 2016 16:57
Show Gist options
  • Save 384400/ee61daf09219976fcc22 to your computer and use it in GitHub Desktop.
Save 384400/ee61daf09219976fcc22 to your computer and use it in GitHub Desktop.
Download ZIP
[Html] [JavaScript] [Css] [Php] Changer de Webdesign selon le moment de la journée
Raw
-time-design.md

Comment changer de Webdesign selon le moment de la journée ?

Voilà quelques mois, l'idée de requêtes media (media queries) basées sur le temps nous a paru intéressante. Chris Nager présente le concept : [Time-based media queries] (http://chrisnager.com/time-based-media-queries/).

[Suncalc] (https://github.com/mourner/suncalc) est une petite bibliothèque en JavaScript, qui pèse moins de 9 kilo-octets avant compression : elle indique la position du soleil et de la lune pour une heure et un endroit donnés.

Selon nos tests conduits au fil de l'eau, les indications horaires calculées par [Suncalc] (https://github.com/mourner/suncalc) sont satisfaisantes.

Aussi avons-nous essayé à titre expérimental de changer la couleur de fond de page selon le moment de la journée, en prenant en compte la localisation du visiteur. Si la demande de localisation n'aboutit pas, aucune couleur ne s'affiche.

Arbitrairement, nous avons choisi de recourir à une teinte spécifique durant les deux heures qui précédent et suivent le zénith du soleil.

Il serait plus judicieux de varier la luminosté au cours du nycthémère, par exemple en intégrant aussi des données météorologiques en temps réel.

Le code que nous présentons est rudimentaire, mais il s'agit d'une ébauche... fonctionnelle !

Nota. Côté serveur, Php propose la fonction [date_sun_info] (http://php.net/manual/en/function.date-sun-info.php).

Raw
time-design.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Changer de Webdesign selon le moment de la journée</title>
</head>
<body onload="getLocation()">
<script src="suncalc.js"></script>
<script>
function between(x, min, max) {
return x >= min && x <= max;
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
var timesLocal = SunCalc.getTimes(new Date(), position.coords.latitude, position.coords.longitude);
var nightEndTimestamp = timesLocal.nightEnd.getTime();
var sunriseTimestamp = timesLocal.sunrise.getTime();
var noonTimestamp = timesLocal.solarNoon.getTime();
var sunsetTimestamp = timesLocal.sunset.getTime();
var nightStartTimestamp = timesLocal.night.getTime();
var now = new Date();
var midnight = new Date();
midnight.setHours(0,0,0,0);
var todayMidnightTimestamp = midnight.getTime();
var tomorrowMidnightTimestamp = todayMidnightTimestamp + (24 * 60 * 60 * 1000);
var beforeNoonTimestamp = noonTimestamp - (2 * 60 * 60 * 1000);
var afterNoonTimestamp = noonTimestamp + (2 * 60 * 60 * 1000);
/*
document.getElementsByTagName('h1')[0].style.color = '#ffcc00';
OR
var h1Elements = document.getElementsByTagName('h1');
for (var i = 0; i < h1Elements.length; i++) {
h1Elements[i].style.color = '#ffcc00';
}
*/
if (between(now, todayMidnightTimestamp, nightEndTimestamp)) {
document.body.style.backgroundColor = '#003366';
}
if (between(now, nightEndTimestamp, sunriseTimestamp)) {
document.body.style.backgroundColor = '#66ccff';
}
if (between(now, sunriseTimestamp, beforeNoonTimestamp)) {
document.body.style.backgroundColor = '#ffff99';
}
if (between(now, beforeNoonTimestamp, afterNoonTimestamp)) {
document.body.style.backgroundColor = '#ffcc00';
}
if (between(now, afterNoonTimestamp, sunsetTimestamp)) {
document.body.style.backgroundColor = '#ffff99';
}
if (between(now, sunsetTimestamp, nightStartTimestamp)) {
document.body.style.backgroundColor = '#66ccff';
}
if (between(now, nightStartTimestamp, tomorrowMidnightTimestamp)) {
document.body.style.backgroundColor = '#003366';
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment