up
This commit is contained in:
Ilya Kantor
parent
fc84391bd2
commit
8360ebbe90
60 changed files with 920 additions and 1672 deletions
|
|
@ -1,164 +1,228 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.news-item {
|
||||
width: 700px;
|
||||
text-align: justify;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.news-item .title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Тексты и картинки взяты с сайта http://etoday.ru. </p>
|
||||
<p>Text and pictures are from https://wikipedia.org.</p>
|
||||
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
<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>
|
||||
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
<figure>
|
||||
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/venus.jpg" width="390" height="390">
|
||||
</figure>
|
||||
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
|
||||
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
|
||||
обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
<h1>Earth</h1>
|
||||
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
<figure>
|
||||
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/earth.jpg" width="390" height="390">
|
||||
</figure>
|
||||
|
||||
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander
|
||||
McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="https://js.cx/lazyimg/2-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="https://js.cx/lazyimg/2-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<h1>Mars</h1>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
<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>
|
||||
|
||||
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf),
|
||||
Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="https://js.cx/lazyimg/3-1.jpg">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="https://js.cx/lazyimg/3-2.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<figure>
|
||||
<img src="placeholder.svg" data-src="https://en.js.cx/clipart/solar/mars.jpg" width="390" height="390">
|
||||
</figure>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
<h1>Jupiter</h1>
|
||||
|
||||
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе.
|
||||
Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="https://js.cx/lazyimg/4.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Подарочный каталог Apple 1983 \ Creative</div>
|
||||
|
||||
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="https://js.cx/lazyimg/5.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Винтажные открытки к празднику Halloween \ Illustrations</div>
|
||||
|
||||
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="https://js.cx/lazyimg/6.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Фотограф Emily Lee \ Photography</div>
|
||||
|
||||
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница
|
||||
большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="https://js.cx/lazyimg/7.jpg"></div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Иконы моды в Fashimals \ Creative</div>
|
||||
|
||||
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
|
||||
|
||||
<div class="illustrations"><img src="https://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="https://js.cx/lazyimg/8.jpg"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
||||
<script>
|
||||
<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) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
let coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
let windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||
// 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;
|
||||
}
|
||||
|
||||
/**
|
||||
Вариант проверки, считающий элемент видимым,
|
||||
если он не более чем -1 страница назад или +1 страница вперед
|
||||
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) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
let coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
let windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
var extendedTop = -windowHeight;
|
||||
var extendedBottom = 2 * windowHeight;
|
||||
let extendedTop = -windowHeight;
|
||||
let extendedBottom = 2 * windowHeight;
|
||||
|
||||
// top visible || bottom visible
|
||||
var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
||||
var bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
|
||||
let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
||||
let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
|
||||
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
*/
|
||||
|
||||
function showVisible() {
|
||||
var imgs = document.getElementsByTagName('img');
|
||||
for (var i = 0; i < imgs.length; i++) {
|
||||
|
||||
var img = imgs[i];
|
||||
|
||||
var realsrc = img.getAttribute('realsrc');
|
||||
if (!realsrc) continue;
|
||||
for (let img of document.querySelectorAll('img')) {
|
||||
let realSrc = img.dataset.src;
|
||||
if (!realSrc) continue;
|
||||
|
||||
if (isVisible(img)) {
|
||||
img.src = realsrc;
|
||||
img.setAttribute('realsrc', '');
|
||||
// disable caching
|
||||
// this line should be removed in production code
|
||||
realSrc += '?nocache=' + Math.random();
|
||||
|
||||
img.src = realSrc;
|
||||
|
||||
img.dataset.src = '';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onscroll = showVisible;
|
||||
window.addEventListener('scroll', showVisible);
|
||||
showVisible();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width='198px' height='198px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(0 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(36 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.1s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(72 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.2s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(108 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.3s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(144 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.4s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(180 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.5s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(216 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.6s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(252 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.7s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(288 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.8s' repeatCount='indefinite'/></rect><rect x='46.5' y='40' width='7' height='20' rx='5' ry='5' fill='rgba(44,44,44,0.6)' transform='rotate(324 50 50) translate(0 -30)'> <animate attributeName='opacity' from='1' to='0' dur='1s' begin='0.9s' repeatCount='indefinite'/></rect></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue