Мы прыгнем вперед чуть-чуть вперед. Это довольно обширная серия скринкастов, но она длится всего 40 часов или около того, и, конечно, настоящий проект на самом деле больше похож на несколько сотен. В этом случае переходом было немного украсить двухстраничный разворот. Мы проходим через эти изменения вначале.
Левая и правая страницы имеют одно общее и одно другое имя класса. Это обычное дело, которое я нахожу во многих различных сценариях веб-дизайна. В этом случае страницы имеют одинаковый градиент и одинаковый размер. Но они отличаются, когда мы применяем skew()преобразование CSS3 . Это дает нам эффект «открытой книги». Поскольку все эти эффекты создаются с помощью CSS, они хорошо масштабируются (в отличие от изображения).
У нас было продуманное решение с одинаковой высотой, но, к сожалению, из-за нашей умной книги с перекосом, оно ломается. Вместо этого мы просто используем немного JavaScript.
Сначала, глядя на JavaScript, мы пишем строку, которая будет скрывать любые «буквы», у которых нет дочерних элементов. Например, нет селекторов, начинающихся с «Z», но у нас есть опубликованная страница, которая называется просто для полноты. Мы обнаруживаем их (а затем скрываем) с помощью ультра-полезного :has()селектора jQuery .
Для получения одинаковой высоты мы измеряем оба столбца, решаем, какой из них самый высокий, а затем устанавливаем оба столбца на самый высокий. Мы должны использовать слегка хакерский setTimeout, чтобы он работал правильно, потому что загрузка @ font-face занимает немного времени и влияет на высоту. В конечном итоге мы могли бы использовать какой-то обратный вызов загрузчика шрифтов. (Или это может быть излишним).
Затем мы переходим к отдельным страницам альманаха. Теперь грузим быстро! Мы проделывали подобные вещи так много раз, что неудивительно, что мы движемся быстрее. По сути, мы придаем форму этому шаблону так же, как мы стилизовали отдельное сообщение в блоге, общую страницу или что-то в этом роде.
Мы используем «черную полосу» для хлебных крошек, закрепляя этот шаблон проектирования как нечто, что мы будем использовать снова и снова для навигации по разделам сайта.