Динамика

Преобразования

Переход

Переход объекта из одного состояния в другое всегда захватывающее зрелище. Например, наблюдать за утренним раскрытием цветка или как гусеница превращается в бабочку.

Жизнь — всегда изменение, преобразование, переход… как изменяющиеся формы облаков, плывущих по небу.

В CSS существует ряд функций, которые позволяют «оживлять» объекты на странице. В этот раз познакомимся с одной из них: transition или по-русски переход свойства объекта из одного состояния в другое. Наведите мышь на синий квадрат и быстро уберите её с него. Проделайте так несколько раз, задерживая мышь над квадратом дольше и дольше.

.

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

Динамические изменения элементов страницы должны быть связаны либо с контентом — изменяющийся график, диаграмма или иллюстрация какого-то процесса, либо как результат действия пользователя или подсказка, приглашение к действию.

При активном чтении пользователь чаще всего выполняет действия мышкой. Воспользуемся этим и «привяжем» к элементу событие наведение мыши.

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

Браузер всегда следит за координатами мыши. Когда она окажется над элементом, правило выполнится мгновенно, меняя значение свойства. На самом деле, в жизни ничего не происходит мгновенно. Попробуем «вдохнуть жизнь» в элементы страницы. Проведём небольшой эксперимент для их оживления.

Подготовка эксперимента

В рабочей папке создайте папку task_05, а в ней папку css. Скопируйте в неё из рабочей папки файл sample.css, переименуйте его в transition_full и откройте для редактирования.

Скопируйте в task_05 из рабочей папки файл sample.htm. Переименуйте его в transition_full, откройте для редактирования и запишите в названии Transition подробно.

Добавьте заголовок с названием страницы Transition. Создайте раздел с заголовком Полный набор свойств. После заголовка добавьте обычный абзац с текстом: Как однажды Жан-звонарь головой свалил фонарь.

У каждого слова в предложении, при наведении на него мыши, должен меняться цвет фона. С белого на цвет, начальная буква которого совпадает с начальной буквой слова.

Слова планируется не выделять, а только наводить на них мышь. В коде HTML назначьте элементу P класс class=rainbow и в коде CSS создайте для него правило с селектором класса. А в правило добавьте свойство «внешний вид курсора» cursor... ? и измените его на стрелку. Затем обновите страницу и наводите мышку на любое слово этого абзаца.

Каждое слово нужно поместить в отдельный элемент HTML. Никакой семантики (особого смысла) в наведении мыши на слова не наблюдается, поэтому можно использовать несемантический элемент SPAN. В коде HTML разметьте каждое слово тегами этого элемента. Для него и будем создавать правило CSS.

После записанных в файле transition_full.css правил добавьте комментарий /* ЭКСПЕРИМЕНТАЛЬНЫЙ БЛОК */ и следующие правила записывайте ниже.

Эксперимент образовательный

Не станем нагружать каждый SPAN отдельным атрибутом с классом или идентификатором. В создаваемом правиле для любого элемента в этом предложении можно указывать общий контекстный селектор prainbow span. Воспользуемся этим и всем словам в начальном состоянии назначим белый фон и чёрный цвет символов.

Теперь нужно создать отдельные правила для каждого SPAN. Их селекторам добавьте два псевдокласса: известный по предыдущей работе перечисление ...nth-child(#) и ещё один — слежение за событием мышь зависла над элементом — ...hover.

В конечном итоге селекторы правил (а их нужно семь) должны быть похожи на это: prainbow spannth-child(#)hover. Осталось в них добавить свойство изменённый цвет фона background-color.... А значением этого свойства в каждом укажите один из перечисленных цветов: red, orange, yellow, green, skyblue, blue, violet.

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

Ещё одна особенность у всех слов — изменения свойств происходят, но мгновенно. Отсутствие анимации не соответствует понятию «жизнь» и «оживление» страницы. Необходим плавный переход цветов от одного к другому.

Для этого существует комплексное свойство transition. Чтобы узнать, как его можно применять к элементам HTML, нужно разобрать роли четырёх свойств, входящих в его состав. Эти свойства, рассматриваемые далее, запишите в первое экспериментальное правило для начального (без ...hover) состояния span в абзаце.

Свойство "transition-property" — содержит имя свойства с изменяемым значением ?.

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

В задаче свойство цвет фона background-color меняет значение при наведении мыши. Его и нужно добавить как значение свойства transition-property.

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

Наблюдаемых свойств в этой задаче будет два: цвет фона и цвет символов color. В значение свойства запишите оба.

Свойство "transition-duration" — длительность изменения ?.

Это свойство длительность анимации: за какое время закончится полное преобразование наблюдаемого свойства. Его значение — время в секундах.

Добавьте и это свойство transition-duration в то же правило. А значением ему запишите пять десятых долей секунды .5s.

Для каждого из нескольких изменяемых свойств через запятую можно указывать отдельную длительность.

Свойство "transition-timing-function" — как быстро должна выполняться анимация ?.

Значением свойства указывают название одной из нескольких математических функций, вычисляющей ускорения выполнения анимации: linear, ease, ease-in-out, ease-in, ease-out и др.

Добавьте и это свойство transition-timing-function со значением linear равномерная скорость. Этому свойству можно задавать и другие значения из списка. Но в задаче длительность изменения всего полсекунды и никаких отличий в разных ускорениях изменения заметно не будет.

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

Свойство "transition-delay" — задержка начала анимации ?.

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

Задайте свойству transition-delay время в секундах: 0.2s.

Так же, как и в предыдущих свойствах transition-..., разным изменяемым свойствам можно назначать различную задержку, перечисляя значения через запятую.

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

Со свойствами перехода можно действительно «оживить» поведение элементов, чтобы они были не «выпрыгивающими» и «вспыхивающими», а плавно выполняли свою роль.

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

Эксперимент с оптимизацией кода

Для упрощения записи кода все четыре свойства можно компактно собрать в одно комплексное.

В task_05 создайте копию файла transition_full и переименуйте её в transition_compact. Так же поступите с файлом в папке CSS и откройте оба файла для редактирования

Редактирование кода HTML. Замените название файла на Transition сокращённо. Имя подключаемого файла CSS — на transition_compact.css и заголовок раздела — на Комплексное свойство.

В файле CSS сразу после первого экспериментального правила создайте новое с таким же селектором для всех SPAN в предложении. Добавьте в него свойство transition ?.

Его значением последовательно через пробел запишите значения каждого отдельного свойства transition-... из первого экспериментального правила: свойство, длительность, скорость, задержка. Но укажите только одно свойство цвет фона. В конце записанного значения вместо точки с запятой поставьте запятую. С новой строки запишите набор тех же значений, но уже для свойства цвет символов. Точку с запятой о завершении описания значения свойства поставьте после него.

Удалите первое экспериментальное правило с подробным описанием каждого свойства transition-.... Теперь они не нужны, так как все необходимые значения изменяемых свойств записаны в комплексном правиле. Так же не нужны описания цветов фона и символов — они заданы по умолчанию в правиле для body.

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

Эксперимент творческий

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

Для кого-то решение будет сложным, а для кого-то интересным. Но для начала конкретную задачу нужно сформулировать, оттолкнувшись от целевой аудитории — те, для кого готовится сайт, страница или учебное пособие.

  • Негоже малыша принуждать наводить мышку на каждое слово в отдельности. Ему быстро станет скучно и после третьего слова он может бросить это занятие.
  • Возможно ему понадобится больше времени, чтобы сосредоточиться на изменяемом цвете и вспомнить его название.
  • Ему понадобится дополнительное время на произношение названия цвета.

Теперь есть три условия, которые нужно соблюсти при формировании кода.

  1. Нужно наводить курсор один раз и на единственный элемент, а цвета должны меняться автоматически. В роли этого элемента будет выступать… конечно абзац.
  2. Длительность изменения цвета нужно увеличить до 1 секунды, чтобы малыш успел его разглядеть. То есть следующий цвет должен начать изменяться не ранее, чем через 1 секунду.
  3. Нужно добавить время и на произношение, например полсекунды.

Вывод. Соблюдая описанные условия, есть чёткий план формирования кода CSS для анимации элементов страницы. Свойство transition-duration должно иметь значение 1s, а свойство transition-delay для каждого элемента должно иметь отдельное значение, увеличенное на 1.5s от предыдущего.

Подготовка. В task_05 создайте копию файла transition_compact и переименуйте её в rainbow. Так же поступите с файлом в папке CSS и откройте оба файла для редактирования

Редактирование кода HTML. Замените название файла на Радуга. Имя подключаемого файла CSS — на rainbow.css и заголовок раздела — на Радуга.

Кодирование. Первое оговорённое условие требует, чтобы браузер следил не за каждым элементом SPAN, а за P. В селекторах всех правил смены цвета фона нужно псевдокласс hover переместить… Самостоятельно решите, в какое место. Сохраните файлы и проверьте результат, наводя мышь в разные места абзаца.

Второе оговорённое условие – увеличить длительность изменения цвета до 1 секунды. Вы сами сумеете изменить это в первом экспериментальном правиле.

Почти получилось. Но фон меняется у всех слов одновременно. Не всякий взрослый умеет внимательно наблюдать за всем и сразу. А что делать малышу? Для него это просто пёстрая картинка, ни о каком запоминании не идёт и речи. Фон у слов должен включаться последовательно один за другим.

Третье оговорённое условие. Почти все значения свойств включения анимации в первом экспериментальном правиле одинаковы для всех SPAN. И наблюдаемые свойства, и длительность, и скорость выполнения. Чтобы изменения цвета фона у слов происходили последовательно отсрочку выполнения transition-delay в общем правиле нужно удалить.

Но без неё нельзя. Она должна быть, и у каждого элемента разной. После первого экспериментального правила создайте отдельные правила для каждого SPAN с единственным свойством transition-delay и его отдельными значениями.

А теперь посчитаем эти значения. Анимация первого слова должна начаться, по договорённости, через .2s и закончиться через 1.5s. Для второго — на полторы секунды дольше (пока не закончится анимация первого) 0.2s + 1.5s = 1.7s. Для третьего — 1.7s + 1.5s =... и так далее.

Если все правила заполнены вычисленными значениями обновите страницу, наведите мышь в любое место абзаца и полюбуйтесь на своё творение.

Контрольная работа

Задания

В рабочей папке создайте папку с именем summary. В ней соответствующие папки для файлов со стилями и изображениями. Работа состоит из четырёх заданий, выполняемых в четырёх отдельных файлах. Имена файлов .htm определены в задании. Созданные для них в папке css стилевые файлы и изображения (если понадобятся) должны иметь те же имена. К именам файлов с изображениями, если их несколько к одному заданию, добавляются порядковые номера.

  1. Первая работа подготовительная. Файл test.htm.

    В него со страницы «Границы и псевдоэлементы» нужно скопировать дизайн элементов в разделах с заголовками на розовом фоне. Для этого, скопировав код, нужно в «Инструментах разработчика» проанализировать свойства CSS каждого элемента.

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

  2. Контрольная работа «Рисование CSS». Файл carrot.htm.

    Создать рисунок морковки, похожий на предложенный в примере «Морковка».

  3. Контрольная работа «Псевдорамка». Файл border.htm.

    Выбрать любую открытку и оформить её похожей на пример «Картинка в полурамке».
  4. Контрольная работа эссе на тему «Роботланд и Я». Файл essay.htm.

    Напишите небольшой рассказ о себе в трёх-пяти абзацах с тремя-пятью предложениями каждый. Меньше нельзя. Больше можно.

    Оформление страницы — полностью ваша фантазия. Творите, как умеете. Покажите, что этот год для вас прошёл не зря. Список примерных вопросов к теме рассказа «о себе».

    • Кем вы были и что ожидали от себя и от курса в сентябре месяце прошлого года?
    • Кем вы стали сейчас, оправдались ли ваши ожидания?
    • Вы получили от курса меньше, чем ожидали? Что конкретно не состоялось и в чём вы видите причину недостатка?
    • Что понравилось в учёбе на курсе? Что было интересным?
    • Как вы планируете поступить с полученными знаниями и опытом?
    Постарайтесь, чтобы дизайн страницы был не скучным, а текст интересным.

Напутствие

Первое задание копирование дизайна. Что это такое? Это ответы на простые вопросы.

  1. Вы разглядываете понравившийся фрагмент страницы. Пробуйте представить, какими элементами HTML он может быть размечен. Предполагайте, в каких взаимных отношениях эти элементы могут находиться.
  2. Далее в «Инструментах веб-разработки» рассмотрите структуру элемента в DOM. Оцените, насколько в предположениях вы оказались близки к коду, построенному автором. Иногда ваши предположения могут оказаться эффективнее авторских.
  3. Рассматривая элементы DOM, обращайте внимание на код CSS. Пытайтесь выяснить: каким образом автор добился именно этого положения и оформления объектов на странице.
  4. В коде CSS последовательно отключайте и включайте разные свойства. Это поможет понять их назначение и действия, оказываемые на элементы. Пробуйте произвольно менять значения свойств, наблюдая за изменениями объекта.
  5. О незнакомых свойствах и непонятных значениях обращайтесь к разным справочникам: привычному Webref, аналогичному HTML5book и другим.
  6. Как только поймёте оформительскую роль свойств CSS выбранного фрагмента, добавьте в код подробные комментарии, чтобы было проще ориентироваться в нём и вносить необходимые корректировки и исправления.
  7. После изучения кода очередного фрагмента страницы, как только поймёте оформительскую роль выбранных свойств, создайте для него отдельные файлы .htm и .css. В нём постройте правильный код, с правильным оформлением и поведением объектов на странице. В код добавьте подробные комментарии, чтобы было проще ориентироваться в нём и вносить необходимые корректировки и исправления.
  8. Готовые файлы сохраняйте в своей библиотеке образцов кода.

Если вы планируете серьёзно заняться изучением веб-… конструирования, дизайна, программирования… то советую обратить внимание на многие сотни статей портала Хабрахабр. Большинство из них вам покажутся заумными и непонятными, но это пока. Там же вы сможете найти много доступных и полезных материалов.

При поиске ответов в интернете в статьях и диалогах на форумах, обращайте внимание на даты публикации. Советы, написанные в 2015 – 2010 годах и ранее, чаще всего, уже устарели. К ним нужно относиться аккуратно.

Изучая советы и работы мастеров, видя их приёмы и решения в дизайне и кодировании, вы сами постепенно будете становиться мастерами.

Готовый пример копирования чужого не кода, но только дизайна «Красивое оформление изображений на сайте»: оригинал. И его воплощение в копии на странице с материалами для контрольной работы «Границы и псевдоэлементы» задание «Картинка в рамке».

Сравнение кодов HTML и CSS при копирование дизайна
код оригинал копия
объектов HTML 3 2
строк кода HTML 5 3
правил CSS 8 5
строк кода в CSS 46 33

Любую работу можно выполнить разными способами. Выбор способа зависит от багажа знаний, накопленного опыта и умения использовать их в нестандартных ситуациях.

Простое копирование кода — не всегда лучшее решение. Важнее понять как он «работает». Тогда его можно будет применять целиком, частями или модернизированным в решениях других задач.

Особое внимание обратите во всех работах на оптимизацию кода — правила с групповыми селекторами. Объединение в одном правиле одинаковых свойств для нескольких объектов уменьшает размер файла и облегчает работу браузера.

Во втором задании с морковкой не ищите сложное решение — фигура симметрична.

Рисунки средствами CSS могут быть намного сложнее. Работы автора с псевдонимом Softlink: простенький рисунок Облачко и более сложный Клавиатура. Почитайте и статьи в его блоге. Найдёте много интересного, несмотря на то, что работы очень старые. Они полезны тем, что описывают применение CSS для интерактивности элементов на страницах.

Ещё один автор с псевдонимом Alexclimber предложил удивительную работу: «Рисуем анимированную сцену с помощью css», выполненную без использования скриптов. Мастер проявляет себя не в увеличении количества инструментов, а в умении использовать имеющиеся.

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

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