228 lines
9.9 KiB
HTML
228 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<p>Text and pictures are from https://wikipedia.org.</p>
|
|
|
|
<h3>All images with <code>data-src</code> load when become visible.</h3>
|
|
|
|
<h1>Solar system</h1>
|
|
|
|
<p>The Solar System is the gravitationally bound system comprising the Sun and the objects that
|
|
orbit it, either directly or indirectly. Of those objects that orbit the Sun directly,
|
|
the largest eight are the planets, with the remainder being significantly smaller objects,
|
|
such as dwarf planets and small Solar System bodies.
|
|
Of the objects that orbit the Sun indirectly, the moons,
|
|
two are larger than the smallest planet, Mercury.</p>
|
|
|
|
<p>The Solar System formed 4.6 billion years ago from the gravitational collapse of a giant
|
|
interstellar molecular cloud. The vast majority of the system's mass is in the Sun, with most
|
|
of the remaining mass contained in Jupiter. The four smaller inner planets, Mercury, Venus,
|
|
Earth and Mars, are terrestrial planets, being primarily composed of rock and metal.
|
|
The four outer planets are giant planets, being substantially more massive than the terrestrials.
|
|
The two largest, Jupiter and Saturn, are gas giants, being composed mainly of hydrogen and helium;
|
|
the two outermost planets, Uranus and Neptune, are ice giants,
|
|
being composed mostly of substances with relatively high melting points compared with hydrogen
|
|
and helium, called volatiles, such as water, ammonia and methane.
|
|
All planets have almost circular orbits that lie within a nearly flat disc called the ecliptic.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/planets.jpg" width="640" height="360">
|
|
</figure>
|
|
|
|
<h1>Sun</h1>
|
|
|
|
<p>The Sun is the Solar System's star and by far its most massive component.
|
|
Its large mass (332,900 Earth masses) produces temperatures and densities in its core
|
|
high enough to sustain nuclear fusion of hydrogen into helium, making it a main-sequence star.
|
|
This releases an enormous amount of energy,
|
|
mostly radiated into space as electromagnetic radiation peaking in visible light.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/sun.jpg" width="658" height="658">
|
|
</figure>
|
|
|
|
<h1>Mercury</h1>
|
|
|
|
<p>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet
|
|
in the Solar System (0.055 Earth masses).
|
|
Mercury has no natural satellites; besides impact craters, its only known geological features
|
|
are lobed ridges or rupes that were probably produced by a period of contraction early in
|
|
its history.[67] Mercury's very tenuous atmosphere consists of atoms blasted off its
|
|
surface by the solar wind.[68] Its relatively large iron core and thin mantle have not yet
|
|
been adequately explained. Hypotheses include that its outer layers were stripped off by a
|
|
giant impact; or, that it was prevented from fully accreting by the young Sun's energy.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mercury.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<h1>Venus</h1>
|
|
|
|
<p>Venus (0.7 AU from the Sun) is close in size to Earth (0.815 Earth masses) and, like Earth,
|
|
has a thick silicate mantle around an iron core, a substantial atmosphere, and evidence of
|
|
internal geological activity. It is much drier than Earth, and its atmosphere is ninety times
|
|
as dense. Venus has no natural satellites. It is the hottest planet, with surface temperatures
|
|
over 400 °C (752°F), most likely due to the amount of greenhouse gases in the atmosphere.
|
|
No definitive evidence of current geological activity has been detected on Venus,
|
|
but it has no magnetic field that would prevent depletion of its substantial atmosphere,
|
|
which suggests that its atmosphere is being replenished by volcanic eruptions.</p>
|
|
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/venus.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<h1>Earth</h1>
|
|
|
|
<p>Earth (1 AU from the Sun) is the largest and densest of the inner planets,
|
|
the only one known to have current geological activity, and the only place where life
|
|
is known to exist. Its liquid hydrosphere is unique among the terrestrial planets,
|
|
and it is the only planet where plate tectonics has been observed.
|
|
Earth's atmosphere is radically different from those of the other planets,
|
|
having been altered by the presence of life to contain 21% free oxygen.
|
|
It has one natural satellite, the Moon, the only large satellite of a terrestrial planet
|
|
in the Solar System.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/earth.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<h1>Mars</h1>
|
|
|
|
<p>Mars (1.5 AU from the Sun) is smaller than Earth and Venus (0.107 Earth masses).
|
|
It has an atmosphere of mostly carbon dioxide with a surface pressure of 6.1 millibars
|
|
(roughly 0.6% of that of Earth). Its surface, peppered with vast volcanoes,
|
|
such as Olympus Mons, and rift valleys, such as Valles Marineris, shows geological
|
|
activity that may have persisted until as recently as 2 million years ago.
|
|
Its red colour comes from iron oxide (rust) in its soil.
|
|
Mars has two tiny natural satellites (Deimos and Phobos) thought to be captured asteroids.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mars.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<h1>Jupiter</h1>
|
|
|
|
<p>Jupiter (5.2 AU), at 318 Earth masses, is 2.5 times the mass of all the other planets put together.
|
|
It is composed largely of hydrogen and helium.
|
|
Jupiter's strong internal heat creates semi-permanent features in its atmosphere,
|
|
such as cloud bands and the Great Red Spot. Jupiter has 67 known satellites.
|
|
The four largest, Ganymede, Callisto, Io, and Europa, show similarities to the terrestrial planets,
|
|
such as volcanism and internal heating.
|
|
Ganymede, the largest satellite in the Solar System, is larger than Mercury.</p>
|
|
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/jupiter.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<h1>Saturn</h1>
|
|
<p>Saturn (9.5 AU), distinguished by its extensive ring system,
|
|
has several similarities to Jupiter, such as its atmospheric composition and magnetosphere.
|
|
Although Saturn has 60% of Jupiter's volume, it is less than a third as massive,
|
|
at 95 Earth masses. Saturn is the only planet of the Solar System that is less dense than water.
|
|
The rings of Saturn are made up of small ice and rock particles.
|
|
Saturn has 62 confirmed satellites composed largely of ice.
|
|
Two of these, Titan and Enceladus, show signs of geological activity.
|
|
Titan, the second-largest moon in the Solar System, is larger than Mercury
|
|
and the only satellite in the Solar System with a substantial atmosphere.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/saturn.jpg" width="805" height="390">
|
|
</figure>
|
|
|
|
<h1>Uranus</h1>
|
|
<p>Uranus (19.2 AU), at 14 Earth masses, is the lightest of the outer planets.
|
|
Uniquely among the planets, it orbits the Sun on its side;
|
|
its axial tilt is over ninety degrees to the ecliptic.
|
|
It has a much colder core than the other giant planets and radiates very little heat into space.
|
|
Uranus has 27 known satellites, the largest ones being Titania,
|
|
Oberon, Umbriel, Ariel, and Miranda.</p>
|
|
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/uranus.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<h1>Neptune</h1>
|
|
<p>Neptune (30.1 AU), though slightly smaller than Uranus, is more massive (equivalent to 17 Earths)
|
|
and hence more dense. It radiates more internal heat,
|
|
but not as much as Jupiter or Saturn.
|
|
Neptune has 14 known satellites. The largest, Triton, is geologically active,
|
|
with geysers of liquid nitrogen.
|
|
Triton is the only large satellite with a retrograde orbit.
|
|
Neptune is accompanied in its orbit by several minor planets, termed Neptune trojans,
|
|
that are in 1:1 resonance with it.</p>
|
|
|
|
<figure>
|
|
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/neptune.jpg" width="390" height="390">
|
|
</figure>
|
|
|
|
<script>
|
|
/**
|
|
* Tests if the element is visible (within the visible part of the page)
|
|
* It's enough that the top or bottom edge of the element are visible
|
|
*/
|
|
function isVisible(elem) {
|
|
|
|
let coords = elem.getBoundingClientRect();
|
|
|
|
let windowHeight = document.documentElement.clientHeight;
|
|
|
|
// top elem edge is visible OR bottom elem edge is visible
|
|
let topVisible = coords.top > 0 && coords.top < windowHeight;
|
|
let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
|
|
|
return topVisible || bottomVisible;
|
|
}
|
|
|
|
/**
|
|
A variant of the test that considers the element visible if it's no more than
|
|
one page after/behind the current screen.
|
|
|
|
function isVisible(elem) {
|
|
|
|
let coords = elem.getBoundingClientRect();
|
|
|
|
let windowHeight = document.documentElement.clientHeight;
|
|
|
|
let extendedTop = -windowHeight;
|
|
let extendedBottom = 2 * windowHeight;
|
|
|
|
// top visible || bottom visible
|
|
let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
|
let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
|
|
|
|
return topVisible || bottomVisible;
|
|
}
|
|
*/
|
|
|
|
function showVisible() {
|
|
for (let img of document.querySelectorAll('img')) {
|
|
let realSrc = img.dataset.src;
|
|
if (!realSrc) continue;
|
|
|
|
if (isVisible(img)) {
|
|
// disable caching
|
|
// this line should be removed in production code
|
|
realSrc += '?nocache=' + Math.random();
|
|
|
|
img.src = realSrc;
|
|
|
|
img.dataset.src = '';
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
window.addEventListener('scroll', showVisible);
|
|
showVisible();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|