up
This commit is contained in:
Ilya Kantor
parent
d85be5f17b
commit
fc84391bd2
143 changed files with 6874 additions and 1 deletions
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
width: 70%;
|
||||
background: tan;
|
||||
overflow: auto;
|
||||
/* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
.header {
|
||||
line-height: 60px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
float: left;
|
||||
margin: 0 1em .5em 0;
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">Шапка</div>
|
||||
|
||||
<div class="column-left">
|
||||
<div class="inner">
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div class="inner">
|
||||
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<div id="avatar">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
|
||||
содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||
|
||||
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
|
||||
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
|
||||
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
|
||||
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
|
||||
надпись.
|
||||
</p>
|
||||
|
||||
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
|
||||
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
|
||||
в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||
|
||||
|
||||
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
|
||||
лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
|
||||
Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
|
||||
из Британской национальной портретной галереи</p>
|
||||
|
||||
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
|
||||
рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
|
||||
эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||
|
||||
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
|
||||
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
|
||||
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
|
||||
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
|
||||
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var avatarElem = document.getElementById('avatar');
|
||||
|
||||
var avatarSourceBottom = avatarElem.getBoundingClientRect().bottom + window.pageYOffset;
|
||||
|
||||
window.onscroll = function() {
|
||||
if (avatarElem.classList.contains('fixed') && window.pageYOffset < avatarSourceBottom) {
|
||||
avatarElem.classList.remove('fixed');
|
||||
} else if (window.pageYOffset > avatarSourceBottom) {
|
||||
avatarElem.classList.add('fixed');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
width: 30%;
|
||||
background: #aef;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
margin-left: 30%;
|
||||
width: 70%;
|
||||
background: tan;
|
||||
overflow: auto;
|
||||
/* расшириться вниз захватить float'ы */
|
||||
}
|
||||
|
||||
.header {
|
||||
line-height: 60px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.inner {
|
||||
margin: 1em;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
float: left;
|
||||
margin: 0 1em .5em 0;
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">Шапка</div>
|
||||
|
||||
<div class="column-left">
|
||||
<div class="inner">
|
||||
<h3>Персонажи:</h3>
|
||||
<ul>
|
||||
<li>Винни-Пух</li>
|
||||
<li>Ослик Иа</li>
|
||||
<li>Сова</li>
|
||||
<li>Кролик</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div class="inner">
|
||||
|
||||
<h3>Винни-Пух</h3>
|
||||
|
||||
<div id="avatar">
|
||||
<img src="https://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
|
||||
<div>Кадр из мультфильма</div>
|
||||
</div>
|
||||
|
||||
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
|
||||
|
||||
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
|
||||
|
||||
<p>Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни),
|
||||
содержавшейся в 1920-х в Лондонском зоопарке.</p>
|
||||
|
||||
<p>Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри
|
||||
Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был
|
||||
привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и
|
||||
военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую
|
||||
надпись.
|
||||
</p>
|
||||
|
||||
<p>«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части
|
||||
не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь
|
||||
в 1954; между этими датами — ряд трагических событий германской истории.</p>
|
||||
|
||||
|
||||
<p>Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный
|
||||
лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер
|
||||
Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. Алан Милн, Кристофер Робин и Винни-Пух. Фотография
|
||||
из Британской национальной портретной галереи</p>
|
||||
|
||||
<p>Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем
|
||||
рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие
|
||||
эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].</p>
|
||||
|
||||
<p>Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии
|
||||
Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов
|
||||
сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных —
|
||||
опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5],
|
||||
возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
importance: 5
|
||||
|
||||
---
|
||||
|
||||
# Аватар наверху при прокрутке
|
||||
|
||||
Сделайте так, чтобы при прокрутке ниже элемента `#avatar` (картинка с Винни-Пухом) -- он продолжал показываться в левом-верхнем углу.
|
||||
|
||||
При прокрутке вверх -- должен возвращаться на обычное место.
|
||||
|
||||
Прокрутите вниз, чтобы увидеть:
|
||||
|
||||
[iframe src="solution" height=300 link border="1"]
|
||||
|
||||
94
2-ui/3-event-details/8-onscroll/2-updown-button/solution.md
Normal file
94
2-ui/3-event-details/8-onscroll/2-updown-button/solution.md
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
Добавим в документ `DIV` с кнопкой:
|
||||
|
||||
```html
|
||||
<div id="updown"></div>
|
||||
```
|
||||
|
||||
Сама кнопка должна иметь `position:fixed`.
|
||||
|
||||
```css
|
||||
#updown {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:
|
||||
|
||||
```css
|
||||
#updown {
|
||||
height: 9px;
|
||||
width: 14px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#updown.up {
|
||||
background: url(...updown.gif) left top;
|
||||
}
|
||||
|
||||
#updown.down {
|
||||
background: url(...updown.gif) left -9px;
|
||||
}
|
||||
```
|
||||
|
||||
Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.
|
||||
|
||||
Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна.
|
||||
|
||||
При прокрутке состояния меняются следующим образом:
|
||||
|
||||
```js
|
||||
window.onscroll = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
var innerHeight = document.documentElement.clientHeight;
|
||||
|
||||
switch (updownElem.className) {
|
||||
case '':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'up':
|
||||
if (pageY < innerHeight) {
|
||||
updownElem.className = '';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
При клике:
|
||||
|
||||
```js
|
||||
var pageYLabel = 0;
|
||||
|
||||
updownElem.onclick = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
switch (this.className) {
|
||||
case 'up':
|
||||
pageYLabel = pageY;
|
||||
window.scrollTo(0, 0);
|
||||
this.className = 'down';
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
window.scrollTo(0, pageYLabel);
|
||||
this.className = 'up';
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#updown {
|
||||
height: 9px;
|
||||
width: 14px;
|
||||
color: green;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#updown.up::before {
|
||||
content: '▲';
|
||||
}
|
||||
|
||||
#updown.down::before {
|
||||
content: '▼';
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="matrix">
|
||||
<script>
|
||||
for (var i = 0; i < 2000; i++) document.writeln(i)
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="updown"></div>
|
||||
|
||||
<script>
|
||||
var updownElem = document.getElementById('updown');
|
||||
|
||||
var pageYLabel = 0;
|
||||
|
||||
updownElem.onclick = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
switch (this.className) {
|
||||
case 'up':
|
||||
pageYLabel = pageY;
|
||||
window.scrollTo(0, 0);
|
||||
this.className = 'down';
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
window.scrollTo(0, pageYLabel);
|
||||
this.className = 'up';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onscroll = function() {
|
||||
var pageY = window.pageYOffset || document.documentElement.scrollTop;
|
||||
var innerHeight = document.documentElement.clientHeight;
|
||||
|
||||
switch (updownElem.className) {
|
||||
case '':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'up':
|
||||
if (pageY < innerHeight) {
|
||||
updownElem.className = '';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'down':
|
||||
if (pageY > innerHeight) {
|
||||
updownElem.className = 'up';
|
||||
}
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#matrix {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Символы для стрелок: ▲ ▼
|
||||
|
||||
<div id="matrix">
|
||||
<script>
|
||||
for (var i = 0; i < 2000; i++) document.writeln(i)
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ... ваш код
|
||||
// при необходимости, в документ можно добавить элементы и стили
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
20
2-ui/3-event-details/8-onscroll/2-updown-button/task.md
Normal file
20
2-ui/3-event-details/8-onscroll/2-updown-button/task.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
importance: 3
|
||||
|
||||
---
|
||||
|
||||
# Кнопка вверх-вниз
|
||||
|
||||
Создайте кнопку навигации, которая помогает при прокрутке страницы.
|
||||
|
||||
Работать должна следующим образом:
|
||||
|
||||
- Пока страница промотана меньше чем на высоту экрана вниз -- кнопка не видна.
|
||||
- При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка "стрелка вверх".
|
||||
- При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на "стрелка вниз" и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на "стрелка вверх".
|
||||
|
||||
Должен получиться удобный навигационный помощник.
|
||||
|
||||
Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху.
|
||||
|
||||
[iframe border="1" height="200" link src="solution"]
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их.
|
||||
|
||||
Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так:
|
||||
|
||||
```js
|
||||
...страница...
|
||||
|
||||
function isVisible(elem) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
|
||||
*!*
|
||||
showVisible();
|
||||
window.onscroll = showVisible;
|
||||
*/!*
|
||||
```
|
||||
|
||||
При запуске функция ищет все видимые картинки с `realsrc` и перемещает значение `realsrc` в `src`. Обратите внимание, т.к. атрибут `realsrc` нестандартный, то для доступа к нему мы используем `get/setAttribute`. А `src` -- стандартный, поэтому можно обратиться по DOM-свойству.
|
||||
|
||||
**Функция проверки видимости `isVisible(elem)` получает координаты текущей видимой области и сравнивает их с элементом.**
|
||||
|
||||
Для видимости достаточно, чтобы координаты верхней(или нижней) границы элемента находились между границами видимой области.
|
||||
|
||||
В решении также указан вариант с `isVisible`, который расширяет область видимости на +-1 страницу (высота страницы -- `document.documentElement.clientHeight`).
|
||||
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!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>
|
||||
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
|
||||
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
|
||||
обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
|
||||
Супермодель Анна Вялицына (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>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
|
||||
Стивен Мейзел (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>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
|
||||
Художник из Филадельфии Мэтью Кокс (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>
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Проверяет элемент на попадание в видимую часть экрана.
|
||||
* Для попадания достаточно, чтобы верхняя или нижняя границы элемента были видны.
|
||||
*/
|
||||
function isVisible(elem) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
// верхняя граница elem в пределах видимости ИЛИ нижняя граница видима
|
||||
var topVisible = coords.top > 0 && coords.top < windowHeight;
|
||||
var bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
|
||||
|
||||
return topVisible || bottomVisible;
|
||||
}
|
||||
|
||||
/**
|
||||
Вариант проверки, считающий элемент видимым,
|
||||
если он не более чем -1 страница назад или +1 страница вперед
|
||||
|
||||
function isVisible(elem) {
|
||||
|
||||
var coords = elem.getBoundingClientRect();
|
||||
|
||||
var windowHeight = document.documentElement.clientHeight;
|
||||
|
||||
var extendedTop = -windowHeight;
|
||||
var extendedBottom = 2 * windowHeight;
|
||||
|
||||
// top visible || bottom visible
|
||||
var topVisible = coords.top > extendedTop && coords.top < extendedBottom;
|
||||
var 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;
|
||||
|
||||
if (isVisible(img)) {
|
||||
img.src = realsrc;
|
||||
img.setAttribute('realsrc', '');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.onscroll = showVisible;
|
||||
showVisible();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!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>
|
||||
|
||||
<h3>Все изображения с realsrc загружаются, когда становятся видимыми.</h3>
|
||||
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Космопорт Америка \ Architecture</div>
|
||||
|
||||
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой
|
||||
площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также
|
||||
обеспечена взлетно-посадочная полоса длиной в три километра.
|
||||
|
||||
<div class="illustrations">
|
||||
<img src="https://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="https://js.cx/lazyimg/1.jpg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Рокер и супермодель в Vogue Russia \ Celebrities</div>
|
||||
|
||||
Супермодель Анна Вялицына (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>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">Старость - не радость в Vogue Italia \ Fashion Photo</div>
|
||||
|
||||
Стивен Мейзел (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>
|
||||
|
||||
<div class="news-item">
|
||||
<div class="title">"Вышитый рентген" Matthew Cox \ Art</div>
|
||||
|
||||
Художник из Филадельфии Мэтью Кокс (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>
|
||||
|
||||
|
||||
<script>
|
||||
// ... ваш код ...
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
50
2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md
Normal file
50
2-ui/3-event-details/8-onscroll/3-load-visible-img/task.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
importance: 4
|
||||
|
||||
---
|
||||
|
||||
# Загрузка видимых изображений
|
||||
|
||||
Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы.
|
||||
|
||||
С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты".
|
||||
|
||||
Вместо такого изображения:
|
||||
|
||||
```html
|
||||
<img src="yozhik.jpg" width="128" height="128">
|
||||
```
|
||||
|
||||
|
||||
|
||||
Стоит вот такое:
|
||||
|
||||
```html
|
||||
<img *!*src="1.gif"*/!* width="128" height="128" *!*realsrc="yozhik.jpg"*/!*>
|
||||
```
|
||||
|
||||
|
||||
|
||||
То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник.
|
||||
|
||||
При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`.
|
||||
|
||||
Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы. Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки.
|
||||
|
||||
Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки.
|
||||
|
||||
Напишите код, который при прокрутке окна загружает ставшие видимыми изображения.
|
||||
|
||||
То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`.
|
||||
|
||||
Пример работы вы можете увидеть в `iframe` ниже, если прокрутите его:
|
||||
|
||||
[iframe src="solution"]
|
||||
|
||||
Особенности реализации:
|
||||
|
||||
- При начальной загрузке некоторые изображения должны быть видны сразу, до прокрутки. Код должен это учитывать.
|
||||
- Некоторые изображения могут быть обычными, без `realsrc`. Их код не должен трогать вообще.
|
||||
- Также код не должен перегружать уже показанное изображение.
|
||||
- Желательно предусмотреть загрузку изображений не только видимых сейчас, но и на страницу вперед и назад от текущего места.
|
||||
|
||||
P.S. Горизонтальной прокрутки нет.
|
||||
29
2-ui/3-event-details/8-onscroll/article.md
Normal file
29
2-ui/3-event-details/8-onscroll/article.md
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
# Прокрутка: событие scroll
|
||||
|
||||
Событие `onscroll` происходит, когда элемент прокручивается.
|
||||
|
||||
В отличие от события `onwheel` (колесико мыши), его могут генерировать только прокручиваемые элементы или окно `window`. Но зато оно генерируется всегда, при любой прокрутке, не обязательно "мышиной".
|
||||
|
||||
[cut]
|
||||
|
||||
Например, следующая функция при прокрутке окна выдает количество прокрученных пикселей:
|
||||
|
||||
```js autorun
|
||||
window.onscroll = function() {
|
||||
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
|
||||
document.getElementById('showScroll').innerHTML = scrolled + 'px';
|
||||
}
|
||||
```
|
||||
|
||||
В действии:
|
||||
Текущая прокрутка = <b id="showScroll">прокрутите окно</b>
|
||||
|
||||
Каких-либо особенностей события здесь нет, разве что для его использования нужно отлично представлять, как получить текущее значение прокрутки или прокрутить документ. Об этом мы говорили ранее, в главе <info:metrics>.
|
||||
|
||||
Некоторые области применения `onscroll`:
|
||||
|
||||
- Показ дополнительных элементов навигации при прокрутке.
|
||||
- Подгрузка и инициализация элементов интерфейса, ставших видимыми после прокрутки.
|
||||
|
||||
Вашему вниманию предлагаются несколько задач, которые вы можете решить сами или посмотреть использование `onscroll` на их примере.
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue