diff --git a/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/solution.md b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/solution.md new file mode 100644 index 00000000..e69de29b diff --git a/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/solution.view/index.html b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/solution.view/index.html new file mode 100644 index 00000000..f230bdb6 --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/solution.view/index.html @@ -0,0 +1,109 @@ + + + + + + + + +
Шапка
+ +
+
+

Персонажи:

+ +
+
+
+
+ +

Винни-Пух

+ +
+ +
Кадр из мультфильма
+
+ +

Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.

+ +

В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.

+ +

Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.

+ +

Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.

+ +

«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.

+ + +

Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. +Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи

+ +

Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].

+ +

Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.

+
+
+ + + + + diff --git a/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/source.view/index.html b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/source.view/index.html new file mode 100644 index 00000000..72e7dfa0 --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/source.view/index.html @@ -0,0 +1,91 @@ + + + + + + + + +
Шапка
+ +
+
+

Персонажи:

+ +
+
+
+
+ +

Винни-Пух

+ +
+ +
Кадр из мультфильма
+
+ +

Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.

+ +

В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.

+ +

Как и многие другие персонажи книги Милна, медвежонок Винни получил имя от одной из реальных игрушек Кристофера Робина (1920—1996), сына писателя. В свою очередь, плюшевый мишка Винни-Пух был назван по имени медведицы по кличке Виннипег (Винни), содержавшейся в 1920-х в Лондонском зоопарке.

+ +

Медведица Виннипег (американский чёрный медведь) попала в Великобританию как живой талисман (маскот) Канадского армейского ветеринарного корпуса из Канады, а именно из окрестностей города Виннипега. Она оказалась в кавалерийском полку «Форт Гарри Хорс» 24 августа 1914 года ещё будучи медвежонком (её купил у канадского охотника-траппера за двадцать долларов 27-летний полковой ветеринар лейтенант Гарри Колборн, заботившийся о ней и в дальнейшем). Уже в октябре того же года медвежонок был привезён вместе с войсками в Британию, а так как полк должен был быть в ходе Первой мировой войны переправлен во Францию, то в декабре было принято решение оставить зверя до конца войны в Лондонском зоопарке. Медведица полюбилась лондонцам, и военные не стали возражать против того, чтобы не забирать её из зоопарка и после войны[1]. До конца дней (она умерла 12 мая 1934 года) медведица находилась на довольствии ветеринарного корпуса, о чём в 1919 году на её клетке сделали соответствующую надпись.

+ +

«Винни-Пух» представляет собой дилогию, но каждая из двух книг Милна распадается на 10 рассказов (stories) с собственным сюжетом, которые могут читаться, экранизироваться и т. д. независимо друг от друга. В некоторых переводах деление на две части не сохранено, в других не переведена вторая («Дом на Пуховой опушке»). Иногда первая и вторая книги выполнены разными переводчиками. Такова необычная судьба немецкого Винни-Пуха: первая книга вышла в немецком переводе в 1928 году, а вторая лишь в 1954; между этими датами — ряд трагических событий германской истории.

+ + +

Действие книг о Пухе происходит в 500-акровом лесу Эшдаун близ купленной Милнами в 1925 году фермы Кочфорд в графстве Восточный Сассекс, Англия, представленном в книге как Стоакровый лес (англ. The Hundred Acre Wood, в пересказе Заходера — Чудесный лес). Реальными являются также Шесть сосен и ручеёк, у которого был найден Северный Полюс, а также упоминаемая в тексте растительность, в том числе колючий утёсник (gorse-bush, чертополох у Заходера), в который падает Пух[2]. Маленький Кристофер Робин любил забираться в дупла деревьев и играть там с Пухом, поэтому многие персонажи книг живут в дуплах, и значительная часть действия происходит в таких жилищах или на ветвях деревьев[2]. +Алан Милн, Кристофер Робин и Винни-Пух. Фотография из Британской национальной портретной галереи

+ +

Действие «Винни-Пуха» разворачивается одновременно в трёх планах — это мир игрушек в детской, мир зверей «на своей территории» в Стоакровом лесу и мир персонажей в рассказах отца сыну (это наиболее чётко показано в самом начале)[4]. В дальнейшем рассказчик исчезает из повествования, и сказочный мир начинает собственное существование, разрастаясь от главы к главе[6]. Отмечалось сходство пространства и мира персонажей «Винни-Пуха» с классическим античным и средневековым эпосом[6]. Многообещающие эпические начинания персонажей (путешествия, подвиги, охоты, игры) оказываются комически малозначительными, в то время как настоящие события происходят во внутреннем мире героев (помощь в беде, гостеприимство, дружба)[6].

+ +

Книги Милна выросли из устных рассказов и игр с Кристофером Робином; устное происхождение характерно и для многих других знаменитых литературных сказок[6]. «Я, собственно, ничего не придумывал, мне оставалось только описывать», как говорил впоследствии Милн[5]. Реальными игрушками Кристофера Робина были также Пятачок (подарок соседей), Иа-Иа без хвоста (ранний подарок родителей), Кенга с Крошкой Ру в сумке и Тигра (куплены родителями впоследствии специально для развития сюжета вечерних рассказов сыну). В рассказах они появляются именно в таком порядке[2]. Сову и Кролика Милн придумал сам; на иллюстрациях Шепарда они выглядят не как игрушки, а как настоящие животные, Кролик говорит Сове: «Только у меня и тебя есть мозги. У остальных — опилки». В процессе игры все эти персонажи получили индивидуальные повадки, привычки и манеру разговора[6]. На созданный Милном мир животных повлияла повесть Кеннета Грэма «Ветер в ивах», которой он восхищался и которую ранее иллюстрировал Шепард[5], возможна также скрытая полемика с «Книгой джунглей» Киплинга[5]. Текст взят из Википедии.

+
+
+ + + + diff --git a/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/task.md b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/task.md new file mode 100644 index 00000000..b27b44ff --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/1-avatar-above-scroll/task.md @@ -0,0 +1,11 @@ +# Аватар наверху при прокрутке + +[importance 5] + +Сделайте так, чтобы при прокрутке ниже элемента `#avatar` (картинка с Винни-Пухом) -- он продолжал показываться в левом-верхнем углу. + +При прокрутке вверх -- должен возвращаться на обычное место. + +Прокрутите вниз, чтобы увидеть: +[iframe src="solution" height=300 link border="1"] + diff --git a/2-ui/3-event-details/7-onscroll/2-updown-button/solution.md b/2-ui/3-event-details/7-onscroll/2-updown-button/solution.md new file mode 100644 index 00000000..ae85065b --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/2-updown-button/solution.md @@ -0,0 +1,94 @@ +Добавим в документ `DIV` с кнопкой: + +```html +
+``` + +Сама кнопка должна иметь `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'; + } + +} +``` + diff --git a/2-ui/3-event-details/7-onscroll/2-updown-button/solution.view/index.html b/2-ui/3-event-details/7-onscroll/2-updown-button/solution.view/index.html new file mode 100644 index 00000000..3c97fe43 --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/2-updown-button/solution.view/index.html @@ -0,0 +1,98 @@ + + + + + + + + +
+ +
+ +
+ + + + diff --git a/2-ui/3-event-details/7-onscroll/2-updown-button/source.view/index.html b/2-ui/3-event-details/7-onscroll/2-updown-button/source.view/index.html new file mode 100644 index 00000000..ce2c2c38 --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/2-updown-button/source.view/index.html @@ -0,0 +1,35 @@ + + + + + + + + + +Символы для стрелок: ▲ ▼ + +
+ +
+ + + + diff --git a/2-ui/3-event-details/7-onscroll/2-updown-button/task.md b/2-ui/3-event-details/7-onscroll/2-updown-button/task.md new file mode 100644 index 00000000..0a2af14e --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/2-updown-button/task.md @@ -0,0 +1,20 @@ +# Кнопка вверх-вниз + +[importance 3] + +Создайте кнопку навигации, которая помогает при прокрутке страницы. + +Работать должна следующим образом: + + +Должен получиться удобный навигационный помощник. + +Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху. + +[iframe border="1" height="200" link src="solution"] + + diff --git a/2-ui/3-event-details/7-onscroll/3-load-visible-img/solution.md b/2-ui/3-event-details/7-onscroll/3-load-visible-img/solution.md new file mode 100644 index 00000000..d43306ff --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/3-load-visible-img/solution.md @@ -0,0 +1,36 @@ +Функция должна по текущей прокрутке определять, какие изображения видимы, и загружать их. + +Она должна срабатывать не только при прокрутке, но и при загрузке. Вполне достаточно для этого -- указать ее вызов в скрипте под страницей, вот так: + +```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`). + +[edit src="solution"]Открыть полное решение в песочнице[/edit] \ No newline at end of file diff --git a/2-ui/3-event-details/7-onscroll/3-load-visible-img/solution.view/index.html b/2-ui/3-event-details/7-onscroll/3-load-visible-img/solution.view/index.html new file mode 100644 index 00000000..877d48a3 --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/3-load-visible-img/solution.view/index.html @@ -0,0 +1,159 @@ + + + + + + + + +

Тексты и картинки взяты с сайта http://etoday.ru.

+ +

Все изображения с realsrc загружаются, когда становятся видимыми.

+ + +
+
Космопорт Америка \ Architecture
+ +Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра. + +
+ +
+
+ +
+
Рокер и супермодель в Vogue Russia \ Celebrities
+ +Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной. +
+ + +
+
+ +
+
Старость - не радость в Vogue Italia \ Fashion Photo
+ +Стивен Мейзел (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). +
+ + +
+
+ +
+
"Вышитый рентген" Matthew Cox \ Art
+ +Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. + +Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. +
+
+ +
+
Подарочный каталог Apple 1983 \ Creative
+ +Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! +Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. +
+
+ +
+
Винтажные открытки к празднику Halloween \ Illustrations
+ +Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г. + +
+
+ +
+
Фотограф Emily Lee \ Photography
+ +Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе. + +
+
+ +
+
Иконы моды в Fashimals \ Creative
+ +Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег. + +
+
+ + + + + + + diff --git a/2-ui/3-event-details/7-onscroll/3-load-visible-img/source.view/index.html b/2-ui/3-event-details/7-onscroll/3-load-visible-img/source.view/index.html new file mode 100644 index 00000000..0359f69c --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/3-load-visible-img/source.view/index.html @@ -0,0 +1,101 @@ + + + + + + + + +

Тексты и картинки взяты с сайта http://etoday.ru.

+ +

Все изображения с realsrc загружаются, когда становятся видимыми.

+ + +
+
Космопорт Америка \ Architecture
+ +Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра. + +
+ +
+
+ +
+
Рокер и супермодель в Vogue Russia \ Celebrities
+ +Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной. +
+ + +
+
+ +
+
Старость - не радость в Vogue Italia \ Fashion Photo
+ +Стивен Мейзел (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). +
+ + +
+
+ +
+
"Вышитый рентген" Matthew Cox \ Art
+ +Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели. + +Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. +
+
+ +
+
Подарочный каталог Apple 1983 \ Creative
+ +Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно! +Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации. +
+
+ +
+
Винтажные открытки к празднику Halloween \ Illustrations
+ +Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г. + +
+
+ +
+
Фотограф Emily Lee \ Photography
+ +Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе. + +
+
+ +
+
Иконы моды в Fashimals \ Creative
+ +Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег. + +
+
+ + + + + + diff --git a/2-ui/3-event-details/7-onscroll/3-load-visible-img/task.md b/2-ui/3-event-details/7-onscroll/3-load-visible-img/task.md new file mode 100644 index 00000000..a3d8e04f --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/3-load-visible-img/task.md @@ -0,0 +1,50 @@ +# Загрузка видимых изображений + +[importance 4] + +Задача, которая описана ниже, демонстрирует результативный метод оптимизации страницы. + +С целью экономии трафика и более быстрой загрузки страницы изображения на ней заменяются на "макеты". + +Вместо такого изображения: + +```html + +``` + + + + +Стоит вот такое: + +```html + +``` + + + +То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник. + +При этом, чтобы браузер загрузил изображение, нужно заменить значение `src` на то, которое находится в `realsrc`. + +Если страница большая, то замена больших изображений на такие макеты существенно убыстряет полную загрузку страницы. Это особенно заметно в случае, когда на странице много анонсов новостей с картинками или изображений товаров, из которых многие находятся за пределами прокрутки. + +Кроме того, для мобильных устройств JavaScript может подставлять URL уменьшенного варианта картинки. + +Напишите код, который при прокрутке окна загружает ставшие видимыми изображения. + +То есть, как только изображение попало в видимую часть документа -- в `src` нужно прописать правильный URL из `realsrc`. + +Пример работы вы можете увидеть в `iframe` ниже, если прокрутите его: + +[iframe src="solution"] + +Особенности реализации: + + +P.S. Горизонтальной прокрутки нет. \ No newline at end of file diff --git a/2-ui/3-event-details/7-onscroll/article.md b/2-ui/3-event-details/7-onscroll/article.md new file mode 100644 index 00000000..df24ac01 --- /dev/null +++ b/2-ui/3-event-details/7-onscroll/article.md @@ -0,0 +1,31 @@ +# Прокрутка: событие scroll + +Событие `onscroll` происходит, когда элемент прокручивается. + +В отличие от события `onwheel` (колесико мыши), его могут генерировать только прокручиваемые элементы или окно `window`. Но зато оно генерируется всегда, при любой прокрутке, не обязательно "мышиной". + +[cut] +Например, следующая функция при прокрутке окна выдает количество прокрученных пикселей: + +```js +//+ autorun +window.onscroll = function() { + var scrolled = window.pageYOffset || document.documentElement.scrollTop; + document.getElementById('showScroll').innerHTML = scrolled + 'px'; +} +``` + +В действии: +Текущая прокрутка = прокрутите окно + +Каких-либо особенностей события здесь нет, разве что для его использования нужно отлично представлять, как получить текущее значение прокрутки или прокрутить документ. Об этом мы говорили ранее, в главе [](/metrics). + +Некоторые области применения `onscroll`: + + +Вашему вниманию предлагаются несколько задач, которые вы можете решить сами или посмотреть использование `onscroll` на их примере. + +