Студия на Таганке

При театре Содружества актёров Таганки располагается большая и продвинутая студия звукозаписи. Мне заказали страницу, на которой попросили показать студию изнутри и её сотрудников.

---

Задумка

Я решил создать у посетителя ощущение, будто он действительно находится внутри. Для этого снимки не ограничены рамками, а занимают всё доступное место, полоса ссылок прозрачная.

tagankastudio.com днёмНочью

В окнах настоящего здания становится темно, а на странице студии темнеет полоса ссылок. Причём, высчитывается время захода солнца для настоящего дня и поэтому летом на странице ночи короткие, как на улице.

Работает это так:

ПХП

$zakat = date_sunset(time(), SUNFUNCS_RET_STRING, 55.753759, 37.61993255.753759, 37.619932 — Местоположение Москвы, 90, 3);
$voshod = date_sunrise(time(), SUNFUNCS_RET_STRING, 55.753759, 37.619932, 90, 3);
$seichas = time();
$zakat = strtotime($zakat);
$voshod = strtotime($voshod);
if ($seichas < $voshod or $seichas > $zakat) $svet = " class='tma'";

ХТМЛ

<body<?php echo $svet;?>>

ЦСС

.tma {
   color: #fff;
   background-color: #ccc;
}

Страницы сотрудников

Сотрудники показаны также на всю площадь окна.

tagankastudio.com/crew/leo

Вёрстка размытого фона

Сперва я размывал его с помощью Яваскрипта, но вычислительная нагрузка была слишком высокой — всё тормозило. Пришлось подготовить заранее размытые изображения. Вычислительная нагрузка исчезла, но объёмные изображения медленно загружались. Выставить низкое качество было нельзя, потому что размытие должно быть красивым. К счастью, я заметил любопытное свойство размытого изображения — когда его растягиваешь, оно почти не теряет во внешнем виде, просто еще больше рамывается. Поэтому фоном служат маленькие размытые изображения, которые затем растягиваются. Размытое изображение для главной весит всего 15 Кб.

Слой с размытостью загружается мгновенно, а полноценный снимок с некоторой допустимой задержкой, но зрительно загрузка быстрая и чем-то напоминает так называемый «прогрессивный джипег».

Заключение

Было приятно работать над этим заказом, общаться с людьми, помогать со съёмкой и просто бывать в студии.