天文和潮汐日历2021

下载代码

html

css

分享到微信朋友圈

html

css

body {
  display: flex;
  justify-items: center;
  padding: 0 40px;
  margin: 0;
  background: #444;padding: 50px;
}
@media (max-width: 900px) {
  body {
    flex-wrap: wrap;
  }
}

#orbitContain {
  position: relative;
  margin-left: 40px;
}
#orbitContain .text {
  position: absolute;
  right: 80px;
  bottom: 20px;
  width: 150px;
  height: 50px;
  font-size: 12px;
  font-family: Helvetica;
  color: #ccc;
}
#orbitContain .text div {
  position: relative;
  text-align: right;
}
#orbitContain .text div:after {
  content: '';
  position: absolute;
  top: 6px;
  right: -38px;
  width: 30px;
  height: 2px;
}
#orbitContain .text div.moon:after {
  border-top: 2px dotted #5aa;
}
#orbitContain .text div.phase:after {
  border-top: 2px solid #7c7c7c;
}
#orbitContain .text div.perigee:after {
  border-top: 2px dotted #bbb;
}
#orbitContain .text div.sun:after {
  border-top: 2px dotted #cc5;
}
#orbitContain .text div.tide:after {
  border-top: 2px solid #5aa;
}

#sunSize {
  position: absolute;
  top: 40px;
  left: 40px;
  padding: 40px;
  border-radius: 100%;
  background: #cc5;
  animation: sunSize 1s infinite;
  animation-play-state: paused;
}
@keyframes sunSize {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
#earthTilt {
  transform: rotate(23.43deg);
  position: absolute;
  top: 185px;
  left: 40px;
  padding: 40px;
}
@keyframes earthTilt {
  0% {
    transform: rotate(23.43deg);
  }
  50% {
    transform: rotate(-23.43deg);
  }
  100% {
    transform: rotate(23.43deg);
  }
}
#earthTilt:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px;
  border-radius: 100%;
  background: linear-gradient(90deg, #5aa 50%, #377 50%);
  animation: earthTilt 1s infinite;
  animation-delay: inherit;
  animation-play-state: paused;
}
#earthTilt:after {
  content: '';
  position: absolute;
  top: -15px;
  bottom: -15px;
  left: calc(50% - 1px);
  border-left: 2px dotted #7c7c7c;
}

#moonSize {
  position: absolute;
  top: 340px;
  left: 47px;
  animation: moonSize 1s linear infinite;
  animation-play-state: paused;
}
@keyframes moonSize {
  0% {
    transform: scale(1.14);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.14);
  }
}
#moonPhase {
  padding: 36px;
  border-radius: 100%;
  overflow: hidden;
  animation: moonPhaseBg linear infinite;
  animation-duration: 1s;
  animation-delay: -2s;
  animation-play-state: paused;
}
@keyframes moonPhaseBg {
  0% {
    background: linear-gradient(90deg, #bbb 50%, #7c7c7c 50%);
  }
  49.9% {
    background: linear-gradient(90deg, #bbb 50%, #7c7c7c 50%);
  }
  50% {
    background: linear-gradient(-90deg, #bbb 50%, #7c7c7c 50%);
  }
  100% {
    background: linear-gradient(-90deg, #bbb 50%, #7c7c7c 50%);
  }
}
@keyframes moonPhaseFg {
  0% {
    transform: scale(1, 1);
    background: #bbb;
  }
  24.9% {
    transform: scale(0, 1);
    background: #bbb;
  }
  25% {
    transform: scale(0, 1);
    background: #7c7c7c;
  }
  49.9% {
    transform: scale(-1, 1);
    background: #7c7c7c;
  }
  50% {
    transform: scale(1, 1);
    background: #7c7c7c;
  }
  74.9% {
    transform: scale(0, 1);
    background: #7c7c7c;
  }
  75% {
    transform: scale(0, 1);
    background: #bbb;
  }
  100% {
    transform: scale(-1, 1);
    background: #bbb;
  }
}
#moonPhase:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  animation: moonPhaseFg linear infinite;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-play-state: inherit;
}

#waveContain {
  overflow-x: scroll;
}
#waveContain::-webkit-scrollbar {
  width: 4px;
}
#waveContain::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #666;
}
#waveContain::-webkit-scrollbar-track:hover {
  background: #4a4a4a;
}

JavaScript

//
// Init
//
const
  oCan = document.getElementById('orbitCan'),
  oCtx = oCan.getContext('2d'),
  wCan = document.getElementById('waveCan'),
  wCtx = wCan.getContext('2d'),
  dateText = document.getElementById('dateText'),
  sunSizeEl = document.getElementById('sunSize'),
  earthTiltEl = document.getElementById('earthTilt'),
  moonSizeEl = document.getElementById('moonSize'),
  moonPhaseEl = document.getElementById('moonPhase'),
  startingDate = new Date('01-01-2021').valueOf(),
  col = {
    bg: '#444',
    bg_l: '#777',
    text: '#ccc',
    moon: '#bbb',
    sun: '#cc5',
    sea: '#5bb',
    darken: '#0004'
  },
  // Period and phase of earth and moon orbits for 2021
  periods = {
    tide: [0.52, 0.26],
    phase: [29.53, 28],
    perigee: [27.32, 9],
    perihelion: [365, 2]
  };
oCan.width = 400;
oCan.height = 400;
oCtx.translate(200, 200);
wCan.width = 365 * 60;
wCan.height = 400;
wCtx.translate(0, wCan.height / 2);

// Scroll listener
document.getElementById('waveContain').addEventListener('scroll', function(e) {
  let day = 365 * (this.scrollLeft / (this.scrollWidth - this.clientWidth));
  window.requestAnimationFrame(() => drawOrbit(day));
});
document.getElementById('waveContain').addEventListener('mousemove', function(e) {
  let day = 365 * (e.offsetX / this.scrollWidth);
  window.requestAnimationFrame(() => drawOrbit(day));
});

//
// Orbit
//
function drawOrbit(day) {
  oCtx.clearRect(-1000, -1000, 2000, 2000);
  oCtx.setLineDash([2, 2]);
  
  const
    earthRad = 100,
    earthX = Math.cos(Math.PI * 2 * (day / 365)) * earthRad,
    earthY = Math.sin(Math.PI * 2 * (day / 365)) * earthRad,
    moonRad = 50,
    currentPhase = (day + 1) / (periods.phase[0] * (13 / 14)),
    moonX = Math.cos(Math.PI * 2 * currentPhase) * moonRad,
    moonY = Math.sin(Math.PI * 2 * currentPhase) * moonRad,
    perigeeX = 12,
    perigeeY = -12,
    sunAng = Math.atan2(earthY, earthX) + (Math.PI / 2);

// Sun
  oCtx.fillStyle = col.sun;
  oCtx.beginPath();
    oCtx.arc(20, 0, 15, 0, Math.PI * 2);
  oCtx.fill();
  oCtx.strokeStyle = col.sun;
  oCtx.lineWidth = 2;
  oCtx.beginPath();
    oCtx.moveTo(20, 0);
    oCtx.lineTo(earthX, earthY);
  oCtx.stroke();
  
  // Earth
  oCtx.strokeStyle = col.sea;
  oCtx.lineWidth = 1;
  oCtx.beginPath();
    oCtx.arc(0, 0, earthRad, 0, Math.PI * 2);
  oCtx.stroke();
  
  oCtx.save();
  oCtx.translate(earthX, earthY);
    oCtx.save();
      // Moonaxis
      oCtx.strokeStyle = col.moon;
      oCtx.lineWidth = 2;
      oCtx.beginPath();
        oCtx.moveTo(0, 0);
        oCtx.lineTo(moonX + perigeeX, moonY + perigeeY);
      oCtx.stroke();
      oCtx.rotate(((day + 0.75) * (364/364.75)) * Math.PI * 2);
      // Axis
      oCtx.strokeStyle = col.sea;
      oCtx.setLineDash([]);
      oCtx.lineWidth = 2;
      oCtx.beginPath();
        oCtx.moveTo(0, 0);
        oCtx.lineTo(18, 0);
      oCtx.stroke();
      // Globe
      oCtx.fillStyle = col.sea;
      oCtx.beginPath();
        oCtx.arc(0, 0, 12, 0, Math.PI * 2);
      oCtx.fill();
    oCtx.restore();
    // Shade
    oCtx.fillStyle = col.darken;
    oCtx.beginPath();
      oCtx.arc(
        0, 0, 12, sunAng, sunAng + Math.PI, true);
    oCtx.fill();
  
    // Moon
    oCtx.translate(perigeeX, perigeeY);
    oCtx.strokeStyle = col.moon;
    oCtx.beginPath();
      oCtx.arc(0, 0, moonRad, 0, Math.PI * 2);
    oCtx.stroke();

oCtx.save();
    oCtx.translate(moonX, moonY);
      oCtx.fillStyle = col.moon;
      oCtx.beginPath();
        oCtx.arc(0, 0, 10, 0, Math.PI * 2);
      oCtx.fill();
      // Shade
      oCtx.fillStyle = col.darken;
      oCtx.beginPath();
        oCtx.arc(
          0, 0, 10, sunAng, sunAng + Math.PI, true);
      oCtx.fill();
    oCtx.restore();
  oCtx.restore();
  
  // Globes
  sunSize.style.animationDelay =
    '-' +
    ((day + 180) / 365).toFixed(3) +
    's';
  earthTilt.style.animationDelay =
    '-' +
    ((day + 157) / 365).toFixed(3) +
    's';
  moonSize.style.animationDelay =
    '-' +
    ((day + (periods.perigee[0] - periods.perigee[1])) / periods.perigee[0]).toFixed(3) +
    's';
  moonPhaseEl.style.animationDelay =
    '-' +
    ((day + (periods.phase[0] - periods.phase[1])) / periods.phase[0]).toFixed(3) +
    's';
  dateText.innerHTML = new Date(startingDate + (day * 8.64e7)).toString().substring(4, 10);
}
drawOrbit(0);

//
// Graph
//

// Axis
wCtx.strokeStyle = col.bg_l;
wCtx.lineWidth = 2;
wCtx.beginPath();
  wCtx.moveTo(0, 0);
  wCtx.lineTo(wCan.width, 0);
wCtx.stroke();

drawSine([
  [periods.tide[0], 9, periods.tide[1]],
  [periods.tide[0] * 2, 1, periods.tide[1]],
  [periods.phase[0] / 2, 4, periods.phase[1]],
  [periods.perigee[0], 1, periods.perigee[1]],
  [periods.perihelion[0], 0.5, periods.perihelion[1]]
], col.sea, 1);

drawSine([periods.tide[0] * 2, 5, periods.tide[1]], col.sea, 1, [3, 3]);
drawSine([periods.phase[0], 8, periods.phase[1]], col.moon, 2);
drawSine([periods.perigee[0], 8, periods.perigee[1]], col.moon, 2, [2, 2]);
drawSine([periods.perihelion[0], 8, periods.perihelion[1]], col.sun, 2, [2, 2]);

// Labels
wCtx.font = '12px Helvetica';
wCtx.fillStyle = col.text;
const
  monthNames = [
    'JANUARY', 'FEBURARY', 'MARCH', 'APRIL', 'MAY', 'JUNE',
    'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER' 
  ],
  monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
let currentDay = 0;
monthDays.forEach((days, i) => {
  let x = Math.floor((wCan.width / 365) * currentDay);
  wCtx.fillText(monthNames[i], x + 5, 15);
  currentDay += days;
});
wCtx.fillText('EQUINOX',  (wCan.width / 365 *  78), -10);
wCtx.fillText('SOLSTICE', (wCan.width / 365 * 171), -10);
wCtx.fillText('EQUINOX',  (wCan.width / 365 * 264), -10);
wCtx.fillText('SOLSTICE', (wCan.width / 365 * 354), -10);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg