Вы, без сомнения, следили за нашей рождественской распродажей SitePoint 2012 года — феерией дизайна в зимней стране (только для настольной версии). Элементы на экране, которые разворачивались день ото дня, включали в себя конькобежцев, танцующих медведей, прыгающих рыбу в дымящийся локомотив — и это еще не все.
Теперь мы добавляем «рождественский сюжетный режим» в этот проект, чтобы те из вас, кто хотел бы углубиться в сюжетный поток.
Перейдите по адресу http://xmas.sitepoint.com/story/css, чтобы увидеть историю текущего дня за вычетом обычной страницы продаж за этот день.
Вы также можете связать напрямую с определенными днями, добавив «# день /» и номер дня. Например, по этой ссылке вы перейдете прямо к 14-му дню:
http://xmas.sitepoint.com/story/css#day/14
Все о дизайне
Концепция, макет и иллюстрация — детище (если это… да, это так!) Харли Александра . Как он объяснил в этом посте, Майкл Саутер создал наш бэкэнд. Ян Коулман заставил все это работать вместе, а Джуд Аакджер руководил командой и проектом.
Анимация была до меня. Я люблю дурачиться с анимацией, и новогодняя распродажа стала идеальным местом для новых идей. Нет, это не будет работать в не текущих браузерах. Да, это также правда, что некоторые сцены могут немного поднять ваш процессор.
Моя задача была:
- Положиться на чистую анимацию CSS3, без интенсивного использования JavaScript
- Найти как можно больше разных подходов к CSS-анимации
И мне едва пришлось нарушить эти правила. Например:
1) Собачья упряжка позиционируется с помощью CSS (position: fixed) и использует CSS-переходы, чтобы переместить ее на место. Однако мне пришлось сложить и вычесть класс, чтобы собачьи побежали.
2) Вы также заметите дым на анимации поезда в 5, 6 и 7 дни, когда он покидает дымовую трубу — как настоящий дым! Мне нужно было немного JavaScript, чтобы вычислить, где труба относительно пути, а затем поместить каждый новый поток дыма относительно этой позиции на пути — а не поезд.
Так что на самом деле JavaScript используется для переключения анимации, а не механизма анимации.
Если вы интересуетесь мелочами CSS этого проекта, присоединяйтесь к обсуждению в нашей рождественской группе CSS Podling . Я буду там болтаться, отвечать на вопросы и получать ваши отзывы о том, что работает лучше всего.
Я также буду писать более длинные анимационные статьи с инструкциями в новом году на SitePoint … так что следите за ними.
А пока проверяйте каждый новый день и дайте нам знать, что вы думаете .