-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
162 lines (145 loc) · 10.1 KB
/
index.html
File metadata and controls
162 lines (145 loc) · 10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>web_space_scale</title>
<link type="image/png" sizes="120x120" rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/styles_scale/articleType1.css">
<link rel="stylesheet" href="css/styles_scale/articleType2.css">
<link rel="stylesheet" href="css/styles_scale/articleType3.css">
<link rel="stylesheet" href="css/styles_scale/articleType4.css">
<link rel="stylesheet" href="css/styles_scale/header.css">
<link rel="stylesheet" href="css/fonts.css">
</head>
<body>
<!--Кнопка "Наверх"-->
<a class="button" href="#begin"></a>
<!--Ссылки на другие страницы-->
<div class="links">
<a class="link" href="planets.html">Планеты</a>
<a class="link" href="spacecrafts.html">Космические аппараты</a>
</div>
<a name="begin"></a>
<!--Начальная заставка-->
<div class="circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<header class="active">
<div class="back"><img src="img/scale/back1.jpg"></div>
<div id="text_header" title="Уверяю тебя, это увлекательно ;)">
<div>Приготовиться к погружению в</div>
<div>мир далекого космоса..</div>
<div id="numbers">
<div id="number3">3..</div>
<div id="number2">2..</div>
<div id="number1">1..</div>
</div>
</div>
<img class="logo" src="img/scale/logo.png" alt="Далекий космос">
</header>
<div id="intro">
<p>Наша планета для нас велика и огромна, однако, на просторах космического пространства, наша планета Земля кажется голубым шариком.
Размеры нашего мира потрясают, но это абсолютное ничто, в сравнении с Вселенной.
</div>
<article class="type1">
<div class="img_type1"><img src="img/scale/Earth_dscovr.jpg" alt="DSCOVR, 21 июля 2022"></div>
<div class="text_type1">
<div class="text_head_type1 head">Сейчас мы находимся здесь</div>
<p>Это Земля — третья по удалённости от Солнца планета Солнечной системы.. Так обычно начинаются все статьи. Что-то типа самая крупная из планет земной группы, самая плотная, пятая по диаметру и массе и т.д. и т.п. Но сейчас нас это не интересует, ибо об этом можно прочитать в любом источнике.
<p>Земля - это та самая планета, которая на данный момент является единственным домом для человечества. Место, где волшебным образом появилась жизнь и в ходе эволюции появились мы с вами.
</div>
<div id="print1" class="print">Аппарат DSCOVR, 21 июля 2022 года</div>
<div id="arrow1"><img src="img/scale/arrow.png"></div>
</article>
<article class="type2">
<div class="head">Наше место в Солнечной системе</div>
<div class="img_type2"><img src="img/scale/system_size.png" alt="Масштабы планет"></div>
<div class="text_type2">
<p>Посмотрим на рзмеры планет нашей Солнечной системы.
<p>Ближайшие крупные космические объекты, которые нас окружают, конечно же, это наши соседи по Солнечной системе. Все с детства запоминают их названия и, наверняка, помнят. Так получилось, что даже среди них мы не самые большие..
</div>
<div id="arrow2"><img src="img/scale/arrow2.png"></div>
<div id="print2" class="print">Наша Земля</div>
<div class="text_type2 long">
<p>А теперь можно глянуть на примерные расстояния между планетами, ведь реальные расстояния не смогут поместиться на маленьком экране монитора.
</div>
<div class="img_long"><img src="img/scale/system.png" alt="Примерный масштаб Солнечной системы"></div>
<div class="text_type2 long" style="margin-top: -3vw;">
<p>1 астрономическая единица (1AU) = 149.6 млн км
<p>Ниже указано время прохождения света от Солнца до планет
</div>
</article>
<article class="type3">
<div class="head">
<p>А сйчас мы приступим к путешествию — только смотрите, чтобы не закружилась голова
</div>
<div style="height: 15vw;">
<div class="text_type3">Отдалимся немного от Земли. Такой вид открывается на Землю, если смотреть на неё с Луны.</div>
<div class="img_type3 img_right"><img src="img/scale/Earth-Apollon8-24december68.png" alt="Аполлон-8, 24 декабря 1968"></div>
<div id="arrow3"><img src="img/scale/arrow3.png"></div>
<div id="print3" class="print">Аппарат Аполлон-8, 24 декабря 1968 года</div>
</div>
<div style="height: 15vw;">
<div class="text_type3">А такой с Марса. Вы бы, наверняка, и не определили Земля ли это.</div>
<div class="img_type3 img_left"><img src="img/scale/Earth_curiosity_june20.png" alt="Curiosity, июнь 2020"></div>
<div id="arrow4"><img src="img/scale/arrow4.png"></div>
<div id="print4" class="print">Аппарат Curiosity, июнь 2020 года</div>
</div>
<div style="height: 15vw;">
<div class="text_type3">Это снимок Земли сразу за кольцами Сатурна. Земля и ее Луна в одном кадре.</div>
<div class="img_type3 img_right"><img src="img/scale/Earth_Cassini_19july13.png" alt="Cassini, 19 июля 2013"></div>
<div id="arrow5"><img src="img/scale/arrow5.png"></div>
<div id="print5" class="print">Аппарат Cassini, 19 июля 2013 года</div>
</div>
<div style="height: 15vw;">
<div class="text_type3">А вот за Нептуном. Фото сделано на расстоянии 6.5 млрд км от Земли.</div>
<div class="img_type3 img_left"><img src="img/scale/Earth_voyager1_14february90.png" alt="Вояджер-1, 14 февраля 1990"></div>
<div id="arrow6"><img src="img/scale/arrow6.png"></div>
<div id="print6" class="print">Аппарат Вояджер-1, 14 февраля 1990, обработка 2020 года</div>
</div>
</article>
<article class="type4">
<div class="head">
<p>Посмотрим на вселенную в перспективе
</div>
<div class="text_type2 long">
<p>А таперь немнго сложных чисел.
<p>Вселенной около 13,75 миллиардов лет. Диаметр видимой части вселенной около 28 миллиардов парсеков (93 миллиарда световых лет). Световой год – единица длины, равная 10 триллионам километров. Все эти числа просто не укладываются в голову.
<p>Попытаемся собрать этот невероятный размер в перспективу, начав с нашей планеты.
</div>
<div id="imgs_anim">
<div class="img_anim"><img src="img/scale/perspective-1.jpg" alt="Перспектива-1"></div>
<div class="img_anim" id="img2"><img src="img/scale/perspective-2.jpg" alt="Перспектива-2"></div>
<div class="img_anim" id="img3"><img src="img/scale/perspective-3.jpg" alt="Перспектива-3"></div>
<div class="img_anim" id="img4"><img src="img/scale/perspective-4.jpg" alt="Перспектива-4"></div>
<div class="img_anim"><img src="img/scale/perspective-5.jpg" alt="Перспектива-5"></div>
<div class="img_anim"><img src="img/scale/perspective-6.jpg" alt="Перспектива-6"></div>
<div class="img_anim"><img src="img/scale/perspective-7.jpg" alt="Перспектива-7"></div>
<div class="img_anim"><img src="img/scale/perspective-8.jpg" alt="Перспектива-8"></div>
</div>
<div id="texts_anim">
<div class="anim_left">
<div class="text_anim print">Земля</div>
<div class="text_anim print">Солнечная система</div>
<div class="text_anim print">Солнечное межзвездное пространство</div>
<div class="text_anim print">Галактика Млечный Путь</div>
</div>
<div class="anim_center"></div>
<div class="anim_right">
<div class="text_anim print">Местная галактическая группа</div>
<div class="text_anim print">Сверхскопление галактик в созвездии Дева</div>
<div class="text_anim print">Местные сверхскопления галактик</div>
<div class="text_anim print">Видимая Вселенная</div>
</div>
</div>
</article>
<script src="js/general.js"></script>
<script src="js/scripts_scale/anim_header.js"></script>
<script src="js/scripts_scale/anim_imgs.js"></script>
<script src="js/scripts_scale/anim_main.js"></script>
<footer><a class="link" href="https://github.com/ellvenro">© 2022 ellvenro</a></footer>
</body>
</html>