От автора: люди, по всему миру заседающие в советах директоров, любят хорошие диаграммы. Они сходят с ума по PowerPoint’у, маркированным спискам и фразам типа «запустить идею и посмотреть, что выйдет», «незамутненное мышление» и «легкая добыча», и чтобы все всегда «двигалось вперед». Обратно – не альтернатива для тех, кто способствует сдвигу парадигм в духе времени. Графики финансовых прогнозов, цифры квартальных продаж и насыщения рынка – мечты управляющего среднего звена.
Как мы, будучи веб-дизайнерами, можем справиться с насущной диаграммой? В действительности отобразить их в Сети можно нескольким способами. Можно просто создать изображение и прикрепить его к веб-странице. Но это не очень общедоступно или интересно. Можно использовать Flash, который весьма хорош для показа диаграмм — но опять же, не очень общедоступен. Кроме того, дизайнеры, разработчики и божества разлюбили Flash. Такие технологии, как HTML5, могут делать многое из того же, не нуждаясь в плагине. Адаптировать к этой задаче можно даже новый элемент HTML5 canvas. Онлайн предлагается множество инструментов составления диаграмм и графиков, которые тоже применимы. Но что, если нам нужно что-то более близкое к потребностям?
Существуют «за» и «против» широкого ряда доступных нам ресурсов, но этот учебник не будет их исследовать. Вместо того мы создадим собственную диаграмму с применением прогрессивно улучшенных крох CSS3 и jQuery. Потому что можем это.
Что мы делаем?
Мы делаем это. И более того! Вот несколько возможностей расширения объясняемых в учебнике техник:
— Индикатор выполнения, показывающий, сколько времени осталось человечеству в случае эпидемии зомби;
— Диаграмма, показывающая уровень снижения безопасности занятий на свежем воздухе во время эпидемии;
— Ужасающе похожая диаграмма, показывающая уровень снижения воспитанности во время эпидемии зомби;
— Увеличение уровня людей, не знающих об эпидемии, потому что они делились со своими зараженными друзьями на Facebook’е* тем, что делали на FarmVille.
Или можно было бы создать график или круговую диаграмму, которые просто иллюстрируют что-то полезное и не переполненное ужасами и зомби. Так что давайте начнем.
Что вам понадобится
— Текстовый редактор или редактор HTML. Выберите свой — здесь их много.
— jQuery. Займитесь безопасным кодированием и возьмите самый последний. Держите вебсайт jQuery открытым, чтобы можно было во время процесса читать документацию.
— Возможно, редактор изображений, такой как Paint, чтобы имитировать то, как могла бы смотреться ваша диаграмма.
— Современный и достойный веб-браузер для предварительного просмотра изменений.
Этого должно хватить. Пожалуйста, обратите внимание, что этот учебник – не введение ни в HTML, ни в CSS, ни в jQuery, ни в зомбиведение. Предполагается некоторый средний уровень знания этих трех технологий и живых мертвецов.
Разметка
HTML-основу диаграммы можно создать множеством способов. В этом учебнике мы начнем с table, потому что это самое здравое визуальное решение в случае, если не применяется JavaScript или CSS. Для доступности в колонке имеется большая галочка.
Скорее! Вам только что предоставили тревожные цифры. Прогнозируется, что количество загорелых зомби в несколько ближайших лет выйдет из-под контроля. Под непосредственной угрозой находятся углеродные тигры и голубые обезьяны. Затем загорелые зомби, скорее всего, возьмутся за нас. Но вы – просто дизайнер. Чем вы могли бы помочь?
Я знаю! Вы могли бы сделать веб-страницу, иллюстрирующую нашу неотвратимую кончину, с красивой, успокаивающей, отлично анимированной графикой!
Для начала давайте вставим эти данные в таблицу, где колонки отражают годы, а строки – различные виды.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=1024"> <title>Example 01: No CSS</title> </head> <body> <div id="wrapper"> <div class="chart"> <h3>Population of endangered species from 2012 to 2016</h3> <table id="data-table" border="1" cellpadding="10" cellspacing="0" summary="The effects of the zombie outbreak on the populations of endangered species from 2012 to 2016"> <caption>Population in thousands</caption> <thead> <tr> <td> </td> <th scope="col">2012</th> <th scope="col">2013</th> <th scope="col">2014</th> <th scope="col">2015</th> <th scope="col">2016</th> </tr> </thead> <tbody> <tr> <th scope="row">Carbon Tiger</th> <td>4080</td> <td>6080</td> <td>6240</td> <td>3520</td> <td>2240</td> </tr> <tr> <th scope="row">Blue Monkey</th> <td>5680</td> <td>6880</td> <td>6240</td> <td>5120</td> <td>2640</td> </tr> <tr> <th scope="row">Tanned Zombie</th> <td>1040</td> <td>1760</td> <td>2880</td> <td>4720</td> <td>7520</td> </tr> </tbody> </table> </div> </div> </body> </html> |
Смотрите пример ниже, чтобы понять, как это выглядит неприкрыто, без применения CSS или JavaScript. Доступность этой таблицы даст возможность людям, использующим скринридеры, понять данные и прочесть послание между строк – «Спасайтесь! Зомби идут!»
Самая легкая часть окончена. Теперь давайте положимся на возможности CSS и JavasScript’а (посредством jQuery), чтобы иллюстрировать то, о чем нам говорят цифры. Технически наша задача – создать диаграмму, работающую во всех современных браузерах от IE 8 и далее.
Я сказал, во всех современных браузерах? IE 8 — счастливчик: ему повезло отвисать в компании классных ребят. Браузеры, поддерживающие CSS3, получат несколько дополнительных вливаний.
«Объединенными усилиями…»
Если хотите вызвать на помощь Капитана Планету, вам, возможно, придется поискать еще где-нибудь. Если хотите знать, как скомбинировать CSS и jQuery для создания диаграммы, иллюстрирующей нашу грядущую судьбу в руках растущей армии зомби, предпочитающих мозгам автозагар, то читайте больше.
Первое, что нужно сделать – это определить стили таблице с помощью некоторого количества основного CSS. Это – красивая безопасная сетка для тех, кто не включил в своем браузере JavaScript.
Начинаем работать с jQuery
Мы применим jQuery для создания своей диаграммы «на ходу», отдельно от исходной таблицы данных. Чтобы это сделать, нужно получить данные из таблицы и сохранить их в более применимом формате. Затем можно добавить в свой документ новые элементы, применяющие эти данные для конструирования диаграммы.
Давайте начнем с создания основной функции createGraph(). Я сократил некоторые из внутренних процессов этой функции, чтобы вы могли получить более ясную картину структуры. Не забывайте: вы всегда можете обратиться к исходному коду, имеющемуся в этом учебнике.
Вот наша основная структура:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// В целях безопасности подождать, пока DOM все загрузит $(document).ready(function() { // Создайте свою диаграмму из данных таблицы и укажите контейнер, в который нужно поместить диаграмму createGraph('#data-table', '.chart'); // Здесь будут диаграммы function createGraph(data, container) { // Объявляем несколько переменных и элементов контейнера … // Создаем объект данных таблицы var tableData = { … } // Полезные переменные для получения доступа к табличным данным … // Сконструируйте диаграмму … // Установите высоту отдельных столбцов гистограммы function displayGraph(bars) { … } // Перезагрузите установки диаграммы и подготовьтесь к показу function resetGraph() { … displayGraph(bars); } // Функции-помощники … // Наконец, отобразите диаграмму через функцию reset resetGraph(); } }); |
Этой функции передаются два параметра:
1. Данные data в форме табличного элемента table;
2. Элемент container, где мы хотели бы в документе разместить свою диаграмму.
Далее мы объявим несколько переменных для управления своими данными и элементами контейнера плюс несколько переменных-датчиков времени для анимации. Вот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Объявите несколько простых переменных и элементы контейнера var bars = []; var figureContainer = $('<div id="figure"></div>'); var graphContainer = $('<div class="graph"></div>'); var barContainer = $('<div class="bars"></div>'); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Переменные счетчика var barTimer; var graphTimer; |
Здесь ничего особенно волнующего нет, но позже все это пригодится.
Получение данных
Помимо простого отображения данных хорошая гистограмма должен иметь красивый большой заголовок, четко маркированные оси и легенду с цветной маркировкой. Нам придется извлекать данные из таблицы и форматировать ее более выразительным образом в диаграмму. Чтобы сделать это, мы создадим объект JavaScript, хранящий наши данные в удобных маленьких функциях. Давайте родим свой объект tableData{}:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// Создаем объект табличных данных var tableData = { // Получаем цифровые данные из ячеек таблицы chartData: function() { … }, // Получаем данные заголовка из заглавия таблицы chartHeading: function() { … }, // Получаем данные легенды из тела таблицы chartLegend: function() { … }, // Получаем самое высокое значение для шкалы оси y chartYMax: function() { … }, // Получаем данные оси y из ячеек таблицы yLegend: function() { … }, // Получаем данные оси x из заголовка таблицы xLegend: function() { … }, // Сортируем данные по группам на основе количества колонок columnGroups: function() { … } } |
Тут у нас есть несколько функций, и они объясняются в комментариях к коду. Большая часть их весьма похожа, так что нам не нужно объяснять каждую. Вместо этого давайте выделим одну из них, columnGroups:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Сортируем данные по группам на основе количества колонок columnGroups: function() { var columnGroups = []; // Получаем количество колонок из первой строки тела таблицы var columns = data.find('tbody tr:eq(0) td').length; for (var i = 0; i < columns; i++) { columnGroups[i] = []; data.find('tbody tr').each(function() { columnGroups[i].push($(this).find('td').eq(i).text()); }); } return columnGroups; } |
Вот как она делится:
— Создайте массив columnGroups[] для хранения данных;
— Получите количество колонок, посчитав ячейки таблицы (td) в первой строке;
— Для каждой колонки найдите количество строк в теле таблицы (tbody) и создайте другой массив для хранения данных табличной ячейки;
— Затем пройдитесь по каждой строке и выберите данные из каждой ячейки таблицы (посредством функции jQuery text()function), а затем добавьте их в массив данных табличной ячейки.
Когда наш объект уже полон первоклассных данных, можно начинать создавать составные элементы нашей гистограммы.
Применение данных
Используя функцию jQuery $.each, уже можно в любой точке циклически просматривать данные и создавать элементы, составляющие диаграмму. Один из самых ловких приемов касается вставки столбцов, представляющих каждый вид внутри годовых колонок.
Вот код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Двигаемся сквозь группы колонок, добавляя по пути столбцы диаграммы $.each(columnGroups, function(i) { // Создаем контейнер группы столбцов диаграммы var barGroup = $('<div class="bar-group"></div>'); // Добавляем внутрь каждой колонки столбцы for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Создаем объект столбцов (bar) для хранения свойств (метка, высота, код и т.д.) и добавляем его в массив // Позже устанавливаем высоту в displayGraph() для того, чтобы стало возможным последовательное отображение слева направо var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('<div class="bar fig' + j + '"><span>' + barObj.label + '</span></div>') .appendTo(barGroup); bars.push(barObj); } // Добавляем в гистограмму группы столбцов barGroup.appendTo(barContainer); }); |
За исключением заголовков, у нашей таблицы есть пять колонок с тремя строками. В нашей диаграмме это означает, что в каждой создаваемой нами колонке появятся по три столбца. Следующее изображение показывает, как будет сконструирована наша гистограмма:
Разбиваем ее:
— Создайте для каждой колонки div контейнера;
— Пройдитесь внутри каждой колонки для получения данных строки и ячейки;
— Создайте объект столбцов (barObj{}) для хранения свойств каждого столбца, таких как его метка, высота и разметка;
— Добавьте в колонку свойство разметки, применяя класс CSS ‘.fig’ + j для кодирования цвета каждого столбца в колонке и обернув метку в span;
— Добавьте объект в свой массив bars[], чтобы позже можно было иметь доступ к данным;
— Соедините все это вместе, добавив колонки в элемент контейнера колонки.
Приз тому, кто заметил, что мы не установили высоту столбцов. Это для того, чтобы позже лучше контролировать то, как они отображаются.
Теперь, когда у нас уже есть столбцы, давайте поработаем над метками своей гистограммы. Так как код для отображения меток весьма похож, объяснять вам его нет необходимости. Вот как мы отображаем ось y:
|
1 2 3 4 5 6 7 8 |
// Добавляем в диаграмму ось y var yLegend = tableData.yLegend(); var yAxisList = $('<ul class="y-axis"></ul>'); $.each(yLegend, function(i) { var listItem = $('<li><span>' + this + '</span></li>') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer); |
Более подробно здесь:
— Получите релевантные табличные данные для своих меток;
— Создайте для элементов неупорядоченный список (ul);
— Пройдитесь по данным меток и создайте для каждой метки пункт списка (li), обернув каждую метку в span;
— Прикрепите пункт к своему списку;
— Наконец, прикрепите список к элементу контейнера.
Повтором этого приема можно добавить легенду, метки оси x и заголовки своей диаграммы.
Перед демонстрированием гистограммы нужно убедиться, что все сделанное нами добавлено в элемент контейнера.
|
1 2 3 4 5 6 7 8 |
// Добавляем в диаграмму столбцы barContainer.appendTo(graphContainer); // Добавляем диаграмму в контейнер диаграммы graphContainer.appendTo(figureContainer); // Добавляем контейнер диаграммы в основной контейнер figureContainer.appendTo(container); |
Отображение данных
Все, что осталось сделать в jQuery – это установить высоту каждого столбца. Вот где пригодится то, что ранее мы сохранили свойство высоты в объекте столбцов (bar).
Мы собираемся последовательно анимировать свою диаграмму, один столбец за другим.
Одно из возможных решений – применить функцию повторного вызова для оживления следующего столбца после окончания последней анимации. Однако анимация диаграммы будет слишком долгой. Вместо этого в нашей гистограмме будет применяться функция таймера для отображения каждого столбца через определенный промежуток времени независимо от того, сколько времени требуется каждому столбцу для набора своей высоты. Круто!
Вот функция displayGraph():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Устанавливаем индивидуальную высоту столбца function displayGraph(bars, i) { // Изменили метод циклического просмотра из-за проблем с $.each, которые нормально не перезагружаются if (i < bars.length) { // Анимируем высоту с помощью функции jQuery animate() $(bars[i].bar).animate({ height: bars[i].height }, 800); // Ожидаем определенное время, затем снова запускаем функцию displayGraph() для следующего столбца barTimer = setTimeout(function() { i++; displayGraph(bars, i); }, 100); } } |
Что вы сказали? «Почему ты не используешь функцию $.each, как везде?» Отличный вопрос. Во-первых, давайте обсудим, что делает функция displayGraph(), а затем почему это так, как есть.
Функция displayGraph() принимает два параметра:
1. Столбцы для циклического просмотра.
2. Указатель (i), от которого нужно начинать повторение (начинающийся с 0).
Давайте разобьем на части остальное:
— Если значение i меньше количества столбцов, то продолжайте;
— Получите текущий столбец из массива, применив значение i;
— Анимируйте свойство высоты (высчитанное как процент и хранимое в bars.height);
— Подождите 100 миллисекунд;
— Увеличьте i на 1 и повторите процесс для следующего столбца.
«Так почему же вам просто не применить перед анимацией функцию $.each с delay()?»
Можно было бы, и это отлично сработало бы… один раз. Но если вы попробовали бы перезагрузить анимацию через кнопку «Перезагрузить гистограмму» («Reset graph»), то события таймера четко не сработали бы и столбцы анимировались бы не поочередно.
Мне бы хотелось быть опровергнутым, и если имеется лучший способ делать это, не стесняйтесь озвучить его в разделе комментариев.
В продолжение вот вам resetGraph():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Перезагружаем установки диаграммы и готовимся к ее отображению function resetGraph() { // Останавливаем всю анимацию и устанавливаем высоту столбца на 0 $.each(bars, function(i) { $(bars[i].bar).stop().css('height', 0); }); // Очищаем таймеры clearTimeout(barTimer); clearTimeout(graphTimer); // Перезагружаем таймер graphTimer = setTimeout(function() { displayGraph(bars, 0); }, 200); } |
Давайте разберем resetGraph():
— Остановите всю анимацию и установите высоту каждого столбца обратно на 0;
— Освободите таймеры, чтобы не было запоздалой анимации;
— Подождите 200 миллисекунд;
— Вызовите displayGraph() для анимации первого столбца (при индексе 0).
Наконец, вызовите resetGraph() внизу createGraph() и наблюдайте за происходящим волшебством, греясь в лучах славы результата своего тяжкого труда.
Не так скоро, радость моя! Перед тем, как продолжить, нужно немного «приодеться».
CSS
Первое, что нам нужно сделать – это скрыть исходную таблицу данных. Это можно совершить множеством способов, но так как наш CSS будет загружаться задолго до JavaScript’а, давайте сделаем это наиболее простейшим способом:
|
1 2 3 |
#data-table { display: none; } |
Готово. Давайте создадим красивую область контейнера, в который поместим свою диаграмму. Так как при ее создании применялись несколько неупорядоченных списков, мы также перезагрузим стили для них. Важно передать элементам #figure и .graph position: relative, так как это закрепит элементы места в контейнерах в точности там, где нам нужно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* Контейнеры */ #wrapper { height: 420px; left: 50%; margin: -210px 0 0 -270px; position: absolute; top: 50%; width: 540px; } #figure { height: 380px; position: relative; } #figure ul { list-style: none; margin: 0; padding: 0; } .graph { height: 283px; position: relative; } |
А теперь перейдем к легенде. Мы размещаем легенду прямо внизу контейнера (#figure) и выстраиваем пункты по горизонтали:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* Легенда */ .legend { background: #f0f0f0; border-radius: 4px; bottom: 0; position: absolute; text-align: left; width: 100%; } .legend li { display: block; float: left; height: 20px; margin: 0; padding: 10px 30px; width: 120px; } .legend span.icon { background-position: 50% 0; border-radius: 2px; display: block; float: left; height: 16px; margin: 2px 10px 0 0; width: 16px; } |
Ось x очень похожа на легенду. Мы выстраиваем элементы по горизонтали и закрепляем их ко дну контейнера (.graph):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Ось x */ .x-axis { bottom: 0; color: #555; position: absolute; text-align: center; width: 100%; } .x-axis li { float: left; margin: 0 15px; padding: 5px 0; width: 76px; } |
Ось y немного сложнее и требует пары приемов. Мы передаем ей position: absolute, чтобы выделить ее из общего потока контента, но закрепить в своем контейнере. Растягиваем каждый li на полную высоту гистограммы и добавляем вверху рамки. Так на фоне получатся красивые горизонтальные линии.
Применяя возможности негативного поля, можно сместить числовые метки внутри span, чтобы они передвинулись вверх и влево. Отлично!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Ось y */ .y-axis { color: #555; position: absolute; text-align: right; width: 100%; } .y-axis li { border-top: 1px solid #ccc; display: block; height: 62px; width: 100%; } .y-axis li span { display: block; margin: -10px 0 0 -60px; padding: 0 10px; width: 40px; } |
Теперь перейдем к мясу в нашем видовом сэндвиче: самим столбцам. Давайте начнем с элемента контейнера для столбцов и колонок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* Столбцы диаграммы */ .bars { height: 253px; position: absolute; width: 100%; z-index: 10; } .bar-group { float: left; height: 100%; margin: 0 15px; position: relative; width: 76px; } |
Здесь ничего слишком сложного нет. Мы просто устанавливаем некоторые размеры контейнера и z-index для гарантии того, что они появятся перед маркировкой оси y.
Теперь к отдельным .bar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.bar { border-radius: 3px 3px 0 0; bottom: 0; cursor: pointer; height: 0; position: absolute; text-align: center; width: 24px; } .bar.fig0 { left: 0; } .bar.fig1 { left: 26px; } .bar.fig2 { left: 52px; } |
Основные стили, на которые следует обратить здесь внимание:
— position: absolute и bottom: 0, что означает, что столбцы будут привязаны к низу нашей гистограммы и вырастут;
— столбцы каждого из видов (.fig0, .fig1 и .fig2), расположенные внутри .bar-group.
Теперь почему мы не минимизируем количество острых краев на любой из данных страниц, использовав свойство border-radius для закругления краев верхних левых и правых углов каждого столбца? OK, border-radius не очень-то необходим, но хорошо смотрится в поддерживающих браузерах. К счастью, последние версии самых популярных браузеров его поддерживают.
Так как мы разместили значения каждой ячейки таблицы в каждом столбце, можно добавить аккуратный маленький выпрыгивающий элемент, появляющийся при проведении мышью над столбцом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.bar span { #fefefe url(../images/info-bg.gif) 0 100% repeat-x; border-radius: 3px; left: -8px; display: none; margin: 0; position: relative; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; width: 40px; z-index: 20; -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px; box-shadow: rgba(0, 0, 0, 0.6) 0 1px 4px; } .bar:hover span { display: block; margin-top: -25px; } |
Сначала выпрыгивание скрыто из виду посредством display: none. Затем, когда над элементом .bar проводят мышью, мы установили display: block для его показа и установили отрицательное margin-top для того, чтобы оно появлялось над каждым столбцом.
Свойства text-shadow, rgba и box-shadow сейчас поддерживаются большинством современных браузеров. Из них только Safari требуется префикс производителя (-webkit-) для того, чтобы заработало box-shadow. Обратите внимание, что эти свойства – просто украшения нашей гистограммы и не требуют понимания. Базовый уровень Internet Explorer’а 8 их просто игнорирует.
Наш последний шаг при сборке в единое целое – нужно кодировать цвет каждого столбца:
|
1 2 3 4 5 6 7 8 9 10 11 |
.fig0 { background: #747474 url(../images/bar-01-bg.gif) 0 0 repeat-y; } .fig1 { background: #65c2e8 url(../images/bar-02-bg.gif) 0 0 repeat-y; } .fig2 { background: #eea151 url(../images/bar-03-bg.gif) 0 0 repeat-y; } |
В этом примере я просто добавил background-color и background-image с вертикальной мозаикой. Так улучшатся стили столбцов и маленькие иконки, представляющие их в легенде. Красиво.
И, верьте или нет, это все!
Законченный продукт
Почти закругляемся. Думаю, мы сделали достаточно для привлечения внимания аудитории к угрозе перенаселенности зомби. Более того, я надеюсь, что вы почерпнули из этого учебника что-нибудь полезное и продолжите расширять границы того, что можно сделать в браузере — особенно с достойными сетевыми стандартами и без применения сторонних плагинов. Если у вас есть мысли о том, как расширить или улучшить что-то, увиденное здесь, не сомневайтесь и оставьте ниже комментарий или найдите меня на Twitter’е @derek_mack.
Приз: высвобождаем мощь CSS3
Это дополнение не так детализировано, как основной пример. Оно в основном служит в качестве выставочного стенда некоторых свойств, продуманных в спецификации CSS3.
Так как к данное время поддержка свойств CSS3 ограничена, то и их применение не распространено. Хотя некоторые из упомянутых характеристик прорываются в другие веб-браузеры, здесь лидируют основанные на Webkit Apple Safari и Google Chrome.
На самом деле мы можем создавать свои диаграммы, вообще не используя изображений, и даже анимировать столбцы с применением CSS вместо jQuery.
Давайте начнем с удаления из столбцов фоновых изображений, заменяя их свойством -webkit-gradient:
|
1 2 3 4 5 6 7 8 9 10 11 |
.fig0 { background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #747474), color-stop(0.49, #676767), color-stop(0.5, #505050), color-stop(1.0, #414141)); } .fig1 { background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #65c2e8), color-stop(0.49, #55b3e1), color-stop(0.5, #3ba6dc), color-stop(1.0, #2794d4)); } .fig2 { background: -webkit-gradient(linear, left top, right top, color-stop(0.0, #eea151), color-stop(0.49, #ea8f44), color-stop(0.5, #e67e28), color-stop(1.0, #e06818)); } |
То же самое можно сделать с выскакивающими числами:
|
1 2 3 4 |
.bar span { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5)); … } |
Для получения более полной информации о градиентах Webkit прочтите блог Surfin’ Safari.
Продолжая говорить о выскакивающих элементах, давайте представим -webkit-transition. Переходы CSS замечательно легко применять и понимать. Когда браузер обнаруживает изменение свойства элемента (высота, ширина, цвет, непрозрачность и т.д.), он делает переход к новому свойству.
И снова обратитесь к Surfin’ Safari за получением информации о -webkit-transition и анимации CSS3.
Вот пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
.bar span { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fff), color-stop(1.0, #e5e5e5)); display: block; opacity: 0; -webkit-transition: all 0.2s ease-out; } .bar:hover span { opacity: 1; } |
При проведении мышью над столбцом поле и непрозрачность выскакивающего элемента изменятся. Это запускает событие перехода согласно установленным нами свойствам. Очень здорово.
Благодаря -webkit-transition мы можем немного упростить функции своего JavaScript’а:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//Устанавливаем индивидуальную высоту столбцов function displayGraph(bars, i) { // Изменили способ циклического просмотра из-за проблем с $.each, которое не перезапускается должным образом if (i < bars.length) { // Добавляем свойства перехода и посредством CSS устанавливаем высоту $(bars[i].bar).css({'height': bars[i].height, '-webkit-transition': 'all 0.8s ease-out'}); // Ждем определенное время, затем снова запускаем функцию displayGraph() для следующего столбца barTimer = setTimeout(function() { i++; displayGraph(bars, i); }, 100); } } // Перезагружаем установки диаграммы и готовимся к ее отображению function resetGraph() { // Устанавливаем высоту столбца на 0 и очищаем все переходы $.each(bars, function(i) { <strong>$(bars[i].bar).stop().css({'height': 0, '-webkit-transition': 'none'});</strong> }); // Очищаем таймеры clearTimeout(barTimer); clearTimeout(graphTimer); // Заново запускаем таймер graphTimer = setTimeout(function() { displayGraph(bars, 0); }, 200); } |
Вот основное, что мы изменили:
— Установили высоту столбцов посредством функции jQuery css() и дали возможность переходам CSS позаботиться об анимации;
— При перезапуске гистограммы выключили переходы, так что высота столбцов мгновенно установилась на 0.
Посмотрите пример, если у вас установлена последняя версия Safari или Chrome’а.
Ультра-Мега-Приз от Webkit: теперь в 3-D!
Чтобы подсмотреть за тем, что будет происходить в будущем, посмотрите маленький эксперимент с эффектом 3-D и превращениями CSS. Для этого снова потребуется последняя версия Safari или Chrome’а:
Как и в нашем предыдущем примере Webkit, здесь нет изображений, а вся анимация управляется через CSS. Поцелуйте меня!
Не знаю, что делать со всей этой информацией. Но предупреждаю вас о потенциальном неправильном употреблении ваших новых возможностей. Словами нашего друга, Капитана Планета: «Все в твоей власти!»
Используйте ее с умом.
Автор: Derek Mack
Источник: //coding.smashingmagazine.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Комментарии (2)