Читать онлайн «Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки». Страница 28

Использование перемещений

Для того чтобы продемонстрировать, как использовать перемещения, мы собираемся провести день на скачках. Помните тот автомат со скачущими лошадками, когда вы были маленькими? Если нет, не расстраивайтесь. Идея проста: лошадки скачут по дороге с разными скоростями, а вы должны угадать какая из них придет первая. Эта игра переделана при помощи перемещений CSS. Вы можете поиграть дома, пройдя по ссылке smashed.by/trnsxpl. Просто наведите курсор на дорожки и смотрите, как скачут лошадки!

Рисунок 4.20. Игра со скачущими лошадками, созданная при помощи перемещений CSS

Разметка для дорожки такова:

<div id=”track”>

<h1>The<em>Smashing</em> Derby</h1>

<ol>

<li><div></div></li>

<! – добавленные лошадки ->

</ol>

</div>

Каждый тег li представляет беговую дорожку, а тег div внутри содержит лошадь. Затем мы перемещаем ширину div по наведению курсора и задаем время:

#track div {

width: 3em;

height: 3em;

background: url(horse.png) no-repeat right center;

transition-property: width;

transition-duration: 6s;

}

#track: hover div {

width: 40em;

}

Здесь мы говорим, что свойство width должно перемещаться около 6 секунд от 3 ems до 40 ems, когда на дорожку наведен курсор. Свойство transition-property настраивается по умолчанию ко всему, поэтому если вы не установите его точно, оно будет перемещать каждое анимируемое свойство.

Все свойства перемещения допускают разделяемый запятой список значений, поэтому вы можете устанавливать множественные свойства к перемещению. Если число величин в свойствах, таких как длительность перемещения, меньше, чем число свойств к перемещению, список будет ставить их в соответствие подобно тому, как было со свойством фона.

Скачки не были бы такими забавными, если бы лошади все время неслись с одной скоростью и приходили к финишу одновременно. Что ж, давайте настроим скорость каждой лошадки с помощью свойства transition-timing-function. У всех видов функций расчета времени одинаковая продолжительность до завершения, но их ускорение и замедление происходит на разном уровне, в зависимости от установленной кривой Безье. Не волнуйтесь, если это звучит слишком по-математически: вы можете выбирать из набора встроенных функций расчета времени. Эти предустановки имеют следующие значения ключевых слов:

• ease

это значение по умолчанию;

• linear

перемещения с постоянной скоростью от A до B;

• ease-in

перемещения в медленном темпе, которые ускоряются при приближении к точке B;

• ease-out

перемещения в быстром темпе, которые замедляются при приближении к точке B;

• ease-in-out

перемещения быстрые до точки на полпути, затем замедляются при приближении к точке B.

Каждая из этих функций применяется именно в таком порядке для лошадей из примера:

li: nth-of-type(1) div { transition-timing-function: ease; }

li: nth-of-type(2) div {

transition-timing-function: linear;

}

li: nth-of-type(3) div {

transition-timing-function: ease-in;

}

li: nth-of-type(4) div {

transition-timing-function: ease-out;

} li: nth-of-type(5) div {

transition-timing-function: ease-in-out;

}

Глядя на рисунок можно увидеть, что лошадь 1 (ease) вырывается в лидеры, это – явный победитель. О, нет! Она выбивается из сил на трети до финала. И все пять лошадей пересекают финиш одновременно!

Если вы недовольны предустановками, то можете установить свои собственные, используя кубическую функцию Безье. Для определения кубической функции, вам нужно задать координаты x и y для контрольных точек кривой. Начало всегда фиксируется на 0,0, а конец – на 1,1, поэтому их не нужно определять. Функцию перемещения ease-in можно определить, как показано ниже, с применением кубической функции:

transition-timing-function: cubic-bezier(0.42, 0, 1, 1);

Некоторое количество инструментов, таких как Lea Verou’s Cubic Bezier preview tool[56], позволят вам визуально задать и «довести до ума» функцию cubic-bezier.

Возможно, вы не захотите, чтобы перемещение произошло, как только изменятся значения. Вы можете контролировать это с помощью свойства transition-delay. Оно действует точно по такому же принципу, как и свойство transition-duration:

#track div {

…

transition-property: width;

transition-duration: 6s;

transition-delay: 1s;

}

Со всеми этими свойствами за плечами ваши элементы «пролетят» по странице за два счета!

Пока дизайнеры и разработчики продолжают выдвигать креативные технические решения, ясно одно: CSS3 будет использоваться дальше. Их применение не только значительно сокращает время на преобразование сайта от визуализации до кода, но также помогает создавать гибкий дизайн, который адаптируется к любой среде: изменениям кода, разному контенту и разным видам устройств.

Пока браузеры «снимают сливки» с CSS3, рабочая группа по CSS уже разрабатывает следующую версию, обычно упоминаемую как CSS4. Ожидается, что это привнесет свойства, которые уже жарко обсуждаются, такие как селекторы родителей, переменные, многоколоночная верстка макета страницы и конусные градиенты.

Восторгаясь от того, что CSS3 и CSS4, возможно, звучат как модные словечки, помните, что в целом живым стандартом является CSS. Каждый член рабочей группы CSS может утверждать, что в веб-стандартах нет таких понятий, как “CSS3” или “CSS4”. На деле, нет больше глобальной версии. После CSS 2.1, CSS была модулирована, и каждый модуль теперь имеет свою версию. И некоторые модули Уровня 1 фактически могли выходить позже, чем модули Уровня 4. Но нам не нужны модные словечки, чтобы приходить в восторг от всего, что приходит в мир CSS, так ведь?

Дэвид Стори имеет степень магистра в области Интернета и Распределенных систем университета Дарема, Великобритания. Член сообщества рабочей группы CSS, он является ярым сторонником открытых веб-стандартов. В настоящее время Дэвид живет в Маунтин Вью, штат Калифорния и работает в компании Motorola Mobility. До этого он работал в Opera, где создал команду разработчиков Developer Relations team и был бренд-менеджером продукта Opera Dragonfly. Так же он работал в ЦЕРН (CERN) – европейском центре ядерных исследований. Являлся автором тестов CSS3.info во времена его золотого периода. Он специализируется на HTML, CSS, SVG и JavaScript.

Ли Веру испытывает давнюю страсть к открытым веб-стандартам. Ее часто называют «гуру CSS». Ей нравится исследовать новые пути по извлечению преимуществ из новых веб-технологий и делиться своими изысканиями в своем блоге lea.verou.me. Ли также создает популярные инструменты и библиотеки, которые помогают веб-разработчикам изучать и применять эти стандарты. Она выступает на нескольких широко известных интернациональных конференциях по разработке сайтов и пишет публикации для ведущих изданий. Еще Ли является соавтором и лектором на курсах по веб-разработке в Афинском университете экономики и бизнеса.

Тэб Аткинс, мл. Специалист во многих областях. Он работает в Google над разработкой браузера Chrome в качестве хакера веб-стандартов, хотя его вклад в код достаточно скромен. Тэб в основном работает со спецификациями HTML и CSS. Также он является членом сообщества рабочей группы CSS и сотрудничает с несколькими другими рабочими группами в W3C.

Когда появилась библиотека jQuery, это было абсолютным открытием. Ее первостепенной и главной задачей было обеспечивать одинаковое поведение браузеров. До этого поддержка основных функций, таких как доступ к частям документа, реагирование на взаимодействие системы с пользователем и даже стиль оформления элементов, очень отличалась в браузерах.

jQuery заменила спецификацию DOM, которая определяла доступный контент на странице со свойствами getElementById() и getElementsByTagName(), более простым методом: используя CSS-селекторы. Перед дизайнерами открылся совершенно новый мир разработки. Ведь они знали CSS, но страдали от ежедневных срывов браузеров, которые не поддерживали сложные селекторы. Другими словами, jQuery позволила нам использовать CSS завтрашнего дня уже сегодня. Упомянутый выше метод сцепления jQuery (это значит, что кодов будет создаваться намного меньше) позволил быстро достичь успеха.

Очень скоро, примерно через несколько лет (и к тому времени, как вы будете читать эту книгу), мы продвинемся еще дальше. У нас есть HTML5, мы владеем поддержкой CSS3, у нас очень много всего, с чем можно развлечься в браузерах, которые установили мы и наши пользователи. Да, IE 6 все еще наш бич, и IE 8 будет с нами еще какое-то время. Но в общем и целом наше положение не такое уж и плохое. Такие библиотеки, как jQuery, дают основные преимущества при исправлении недочетов в старых браузерах, но они также вызывают и некоторую неудовлетворенность. А причина в том, что мы злоупотребляем ими.