Створення анімованої гістограми з допомогою HTML, CSS і jQuery

16

Від автора: люди, по всьому світу засідають в радах директорів, люблять гарні діаграми. Вони сходять з розуму по PowerPoint’у, маркованими списками і фразах типу «запустити ідею і подивитися, що вийде», «незамутненное мислення» і «легка здобич», і щоб все завжди «рухалася вперед». Назад – не альтернатива для тих, хто сприяє зрушенню парадигм в дусі часу. Графіки фінансових прогнозів, цифри квартальних продажів і насичення ринку – мрії керуючого середньої ланки.

Як ми, будучи веб-дизайнерами, можемо впоратися з нагальною діаграмою? Насправді відобразити їх в Мережі можна кількома способами. Можна просто створити зображення і прикріпити його до веб-сторінці. Але це не дуже загальнодоступно або цікаво. Можна використовувати Flash, який досить добре для показу діаграм — але знову ж таки, не дуже загальнодоступний. Крім того, дизайнери, розробники і божества розлюбили Flash. Такі технології, як HTML5, можуть робити багато чого з того ж, не потребуючи в плагіні. Адаптувати до цієї задачі можна навіть новий елемент HTML5 canvas. Онлайн пропонується безліч інструментів складання діаграм і графіків, які теж застосовні. Але що, якщо нам потрібно щось більш близьке до потреб?

Існують «за» і «проти» широкого ряду доступних нам ресурсів, але цей підручник не буде їх досліджувати. Замість того ми створимо власну діаграму з застосуванням прогресивно поліпшених крихт CSS3 і jQuery. Тому що можемо це.

Створення анімованої гістограми з допомогою HTML, CSS і jQuery

Що ми робимо?

Ми робимо це. І більше того! Ось кілька можливостей розширення які пояснюються в підручнику технік:

— Індикатор, який показує, скільки часу залишилося людству в разі епідемії зомбі;

— Діаграма, що показує рівень зниження безпеки занять на свіжому повітрі під час епідемії;

— Жахливо схожа діаграма, що показує рівень зниження вихованості під час епідемії зомбі;

— Збільшення рівня людей, які не знають про епідемію, тому що вони ділилися зі своїми зараженими друзями на facebook’е тим, що робили на FarmVille.

Чи можна було б створити графік або кругову діаграму, які просто ілюструють щось корисне і не переповнене жахами і зомбі. Так що давайте почнемо.

Що вам знадобиться

— Текстовий редактор або редактор HTML. Виберіть свій — тут їх багато.

— jQuery. Займіться безпечним кодуванням і візьміть самий останній. Тримайте вебсайт jQuery відкритим, щоб можна було під час процесу читати документацію.

— Можливо, редактор зображень, такий як Paint, щоб імітувати те, як могла б виглядати ваша діаграма.

— Сучасний і гідний веб-браузер для попереднього перегляду змін.

Цього має вистачити. Будь ласка, зверніть увагу, що цей підручник – не введення в HTML, ні в CSS, ні в jQuery, ні в зомбиведение. Передбачається деякий середній рівень знання цих трьох технологій і живих мерців.

Розмітка

HTML-основу діаграми можна створити безліччю способів. У цьому підручнику ми почнемо з table, тому що це найрозумніше візуальне рішення у разі, якщо не застосовується JavaScript або CSS. Для доступності в колонці є велика галочка.

Швидше! Вам тільки що надійшли тривожні цифри. Прогнозується, що кількість засмаглих зомбі в кілька найближчих років вийде з-під контролю. Під безпосередньою загрозою знаходяться вуглецеві тигри і блакитні мавпи. Потім засмаглі зомбі, швидше за все, візьмуться за нас. Але ви – просто дизайнер. Чим ви могли б допомогти?

Я знаю! Ви могли б зробити веб-сторінку, яка ілюструє нашу невідворотну смерть, з гарної, заспокійливої, відмінно анімованої графікою!

Для початку давайте вставимо ці дані в таблицю, де колонки відображають роки, а рядки – різні види.

Example 01: No CSS

Population of endangered species from 2012 to 2016


Population in thousands

  2012 2013 2014 2015 2016
Carbon Tiger 4080 6080 6240 3520 2240
Blue Monkey 5680 6880 6240 5120 2640
Tanned Zombie 1040 1760 2880 4720 7520

Дивіться приклад нижче, щоб зрозуміти, як це виглядає неприкрито, без застосування CSS та JavaScript. Доступність цієї таблиці дасть можливість людям, які використовують скринридеры, зрозуміти дані і прочитати послання між рядків – «Рятуйтеся! Зомбі йдуть!»

Створення анімованої гістограми з допомогою HTML, CSS і jQuery

Найлегша частина закінчена. Тепер давайте довіримось можливості CSS і JavasScript’а (за допомогою jQuery), щоб ілюструвати те, про що нам говорять цифри. Технічно наше завдання – створити діаграму, що працює у всіх сучасних браузерах від IE 8 і далі.

Я сказав, що у всіх сучасних браузерах? IE 8 — щасливчик: йому пощастило відвисати в компанії класних хлопців. Браузери, які підтримують CSS3, отримають кілька додаткових вливань.

«Об’єднаними зусиллями…»

Якщо хочете викликати на допомогу Капітана Планету, вам, можливо, доведеться пошукати ще де-небудь. Якщо хочете знати, як скомбінувати CSS і jQuery для створення діаграми, що ілюструє нашу майбутню долю в руках зростаючої армії зомбі, віддають перевагу мізкам автозагар, то читайте більше.

Перше, що потрібно зробити – це визначити стилі таблиці за допомогою деякої кількості основного CSS. Це – красива сітка для тих, хто не включив у своєму браузері JavaScript.

Створення анімованої гістограми з допомогою HTML, CSS і jQuery

Починаємо працювати з jQuery

Ми застосуємо jQuery для створення діаграми «на ходу», окремо від вихідної таблиці даних. Щоб це зробити, потрібно отримати дані з таблиці і зберегти їх в більш застосовне форматі. Потім можна додати в свій документ нові елементи, які застосовують ці дані для побудови діаграми.

Давайте почнемо з створення основної функції createGraph(). Я скоротив деякі з внутрішніх процесів цієї функції, щоб ви могли отримати більш ясну картину структури. Не забувайте: ви завжди можете звернутися до вихідного коду, наявному в цьому підручнику.

Ось наша основна структура:

// В цілях безпеки почекати, поки 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, де ми хотіли б у документі розмістити свою діаграму.

Далі ми оголосимо кілька змінних для управління своїми даними і елементами контейнера плюс кілька змінних-датчиків часу для анімації. Ось код:

// Оголосіть кілька простих змінних і елементи контейнера
var bars = [];
var figureContainer = $(‘

‘);
var graphContainer = $(‘

‘);
var barContainer = $(‘

‘);
var data = $(data);
var container = $(container);
var chartData;
var chartYMax;
var columnGroups;
// Змінні лічильника
var barTimer;
var graphTimer;

Тут нічого особливо хвилюючого немає, але пізніше все це стане в нагоді.

Отримання даних

Крім простого відображення даних хороша гістограма повинен мати красивий великий заголовок, чітко марковані осі і легенду з кольоровим маркуванням. Нам доведеться витягувати дані з таблиці і форматувати її більш виразним чином в діаграму. Щоб зробити це, ми створимо об’єкт JavaScript, зберігає наші дані в зручних маленьких функціях. Давайте народимо свій об’єкт tableData{}:

// Створюємо об’єкт табличних даних
var tableData = {
// Отримуємо цифрові дані з комірок таблиці
chartData: function() {

},
// Отримуємо дані заголовка із заголовка таблиці
chartHeading: function() {

},
// Отримуємо дані легенди з тіла таблиці
chartLegend: function() {

},
// Отримуємо найвище значення для шкали осі y
chartYMax: function() {

},
// Отримуємо дані осі y з клітинок таблиці
yLegend: function() {

},
// Отримуємо дані осі x з заголовка таблиці
xLegend: function() {

},
// Відсортуємо дані по групах на основі кількості колонок
columnGroups: function() {

}
}

Тут у нас є кілька функцій, і вони пояснюються в коментарях до коду. Велика частина їх дуже схожа, так що нам не потрібно пояснювати кожну. Замість цього, давайте виділимо одну з них, columnGroups:

// Відсортуємо дані по групах на основі кількості колонок
columnGroups: function() {
var columnGroups = [];
// Отримуємо кількість колонок з першого рядка таблиці тіла
var columns = data.find(‘tbody tr:eq(0) td’).length;
for (var i = 0; i < columns; i++) {
columnGroups = [];
data.find(‘tbody tr’).each(function() {
columnGroups.push($(this).find(‘td’).eq(i).text());
});
}
return columnGroups;
}

Ось як вона ділиться:

— Створіть масив columnGroups[] для зберігання даних;

— Отримаєте кількість колонок, вважаючи комірки таблиці (td) у першому рядку;

— Для кожної колонки знайдіть кількість рядків у тілі таблиці (tbody) і створіть інший масив для зберігання даних комірки таблиці;

— Потім пройдіться по кожному рядку виберіть дані з кожної комірки таблиці за допомогою функції jQuery text()function), а потім додайте їх в масив даних комірки таблиці.

Коли наш об’єкт уже повний першокласних даних, можна починати створювати складові елементи нашої гістограми.

Застосування даних

Використовуючи функцію jQuery $.each, вже можна в будь-якій точці циклічно переглядати дані і створювати елементи, що складають діаграму. Один з найбільш спритних прийомів стосується вставлення стовпців, які представляють кожен вид межах річних колонок.

Ось код:

// Рухаємось крізь групи колонок, додаючи по шляху стовпці діаграми
$.each(columnGroups, function(i) {
// Створюємо контейнер групи стовпчиків діаграми
var barGroup = $(‘

‘);
// Додаємо всередину кожної колонки стовпці
for (var j = 0, k = columnGroups.length; j < k; j++) {
// Створюємо об’єкт стовпців (bar) для зберігання властивостей (мітка, висота, код тощо) і додаємо його в масив
// Пізніше встановлюємо висоту displayGraph() для того, щоб стало можливим послідовне відображення зліва направо
var barObj = {};
barObj.label = this[j];
barObj.height = Math.floor(barObj.label / chartYMax * 100) + ‘%’;
barObj.bar = $(‘

‘+ barObj.label + ‘

‘)
.appendTo(barGroup);
bars.push(barObj);
}
// Додаємо в гістограму групи стовпців
barGroup.appendTo(barContainer);
});

За винятком заголовків, у нашій таблиці є п’ять колонок з трьома рядками. У нашій діаграмі це означає, що в кожної створюваної нами колонці з’являться три стовпці. Наступне зображення показує, як буде сконструйована наша гістограма:

Створення анімованої гістограми з допомогою HTML, CSS і jQuery

Розбиваємо її:

— Створіть для кожної колонки div контейнера;

— Пройдіться всередині кожної колонки для отримання даних рядки та клітинки;

— Створіть об’єкт стовпців (barObj{}) для зберігання властивостей кожного стовпця, таких як його мітка, висота і розмітка;

— Додайте в колонку властивість розмітки, застосовуючи клас CSS ‘.fig’ + j для кодування кольору кожного стовпця в колонці і обернувши мітку span;

— Додайте об’єкт у свій масив bars[], щоб пізніше можна було мати доступ до даних;

— З’єднайте все це разом, додавши колонки в елемент контейнера колонки.

Приз тому, хто помітив, що ми не встановили висоту стовпців. Це для того, щоб згодом краще контролювати те, як вони відображаються.

Тепер, коли у нас вже є стовпці, давайте попрацюємо над мітками своєї гістограми. Так як код для відображення міток дуже схожий, пояснювати вам немає необхідності. Ось як ми відображаємо вісь y:

// Додаємо в діаграму вісь y
var yLegend = tableData.yLegend();
var yAxisList = $(‘

    ‘);
    $.each(yLegend, function(i) {
    var listItem = $(‘

  • ‘+ this + ‘
  • ‘)
    .appendTo(yAxisList);
    });
    yAxisList.appendTo(graphContainer);

    Більш докладно тут:

    — Отримаєте релевантні табличні дані для своїх міток;

    — Створіть для елементів ненумерованний список (ul);

    — Пройдіться за даними міток і створіть для кожної мітки пункт списку (li), обернувши кожну мітку span;

    — Прикріпіть пункт до свого списку;

    — Нарешті, прикріпіть список елементу-контейнера.

    Повтором цього прийому можна додати легенду, підписи осі x і заголовки своєї діаграми.

    Перед демонструванням діаграми потрібно переконатися, що все зроблене нами додано в елемент контейнера.

    // Додаємо в діаграму стовпці
    barContainer.appendTo(graphContainer);
    // Додаємо діаграму в контейнер діаграми
    graphContainer.appendTo(figureContainer);
    // Додаємо контейнер діаграми в основний контейнер
    figureContainer.appendTo(container);

    Відображення даних

    Все, що залишилося зробити в jQuery – це встановити висоту кожного стовпця. Ось де знадобиться те, що раніше ми зберегли властивість висоти в об’єкті стовпців (bar).

    Ми збираємося послідовно анімувати свою діаграму, один стовпець за іншим.

    Одне з можливих рішень – застосувати функцію повторного виклику для пожвавлення наступного стовпця після закінчення останньої анімації. Однак анімація діаграми буде занадто довгою. Замість цього в нашій гістограмі буде застосовуватися функція таймера для відображення кожного стовпця через певний проміжок часу незалежно від того, скільки часу потрібно кожному стовпцю для набору своєї висоти. Круто!

    Ось функція displayGraph():

    // Встановлюємо індивідуальну висоту стовпця
    function displayGraph(bars, i) {
    // Змінили метод циклічного перегляду з-за проблем з $.each, які нормально не перезавантажуються
    if (i < bars.length) {
    // Анимируем висоту з допомогою функції jQuery animate()
    $(bars.bar).animate({
    height: bars.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():

    // Перезавантажуємо установки діаграми і готуємося до її відображення
    function resetGraph() {
    // Зупиняємо всю анімацію і встановлюємо висоту стовпця 0
    $.each(bars, function(i) {
    $(bars.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’а давайте зробимо це найбільш простим способом:

    #data table {
    display: none;
    }

    Готове. Давайте створимо красиву область контейнера, у який помістимо свою діаграму. Так як при її створенні застосовувалися кілька невпорядкованих списків, ми також перезагрузим стилі для них. Важливо передати елементам #figure і .graph position: relative, так як це закріпить елементи місця в контейнерах в точності там, де нам потрібно.

    /* Контейнери */
    #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) і вибудовуємо пункти по горизонталі:

    /* Легенда */
    .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):

    /* Вісь 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;
    ширина: 76px;
    }

    Вісь y трохи складніше і вимагає пари прийомів. Ми передаємо їй position: absolute, щоб виділити її із загального потоку контенту, але закріпити у своєму контейнері. Розтягуємо кожен li на повну висоту гістограми і додаємо вгорі рамки. Так на тлі вийдуть красиві горизонтальні лінії.

    Застосовуючи можливості негативного поля, можна змістити числові мітки всередині span, щоб вони пересунулися вгору і вліво. Відмінно!

    /* 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;
    }

    Тепер перейдемо до м’яса в нашому видовому сендвічі: самим стовпцями. Давайте почнемо з елементу контейнера для стовпців і колонок:

    /* Стовпці діаграми */
    .bars {
    height: 253px;
    position: absolute;
    width: 100%;
    z-index: 10;
    }
    .bar-group {
    float: left;
    height: 100%;
    margin: 0 15px;
    position: relative;
    ширина: 76px;
    }

    Тут нічого надто складного немає. Ми просто встановлюємо деякі розміри контейнера і z-index для гарантії того, що вони з’являться перед маркуванням осі y.

    Тепер до окремих .bar:

    .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 для закруглення країв верхніх лівих та правих кутів кожного стовпчика? ОК, border-radius не дуже-то необхідний, але добре виглядає в браузерах що підтримують. На щастя, останні версії найбільш популярних браузерів його підтримують.

    Так як ми розмістили значення кожної комірки таблиці в кожному стовпці, можна додати акуратний маленький вистрибує елемент, що з’являється при проведенні мишею над стовпчиком:

    .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 їх просто ігнорує.

    Наш останній крок при складанні в єдине ціле – потрібно кодувати колір кожного стовпця:

    .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 з вертикальною мозаїкою. Так покращаться стилі стовпців і маленькі іконки, представляють їх у легенді. Красиво.

    І, вірте чи ні, це все!

    Закінчений продукт

    Створення анімованої гістограми з допомогою HTML, CSS і jQuery

    Майже згортаємося. Думаю, ми зробили достатньо для залучення уваги аудиторії до загрозі перенаселення зомбі. Більше того, я сподіваюся, що ви почерпнули з цього підручника що-небудь корисне і продовжите розширювати межі того, що можна зробити в браузері — особливо з гідними мережевими стандартами і без застосування сторонніх плагінів. Якщо у вас є думки про те, як розширити або поліпшити щось, побачене тут, не сумнівайтеся і залиште коментар нижче або знайдіть мене на twitter’і @derek_mack.

    Приз: вивільняємо міць CSS3

    Це доповнення не так детально, як основний приклад. Воно здебільшого служить в якості виставкового стенду деяких властивостей, продуманих в специфікації CSS3.

    Так як на даний час підтримка властивостей CSS3 обмежена, то і їх застосування не поширене. Хоча деякі зі згаданих характеристик прориваються в інші веб-браузери, тут лідирують засновані на Webkit Apple Safari і Google Chrome.

    Насправді ми можемо створювати свої діаграми, взагалі не використовуючи зображень, і навіть анімувати стовпці із застосуванням CSS замість jQuery.

    Давайте почнемо з видалення стовпців фонових зображень, замінюючи їх властивістю -webkit-gradient:

    .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));
    }

    Те ж саме можна зробити з вискакують числами:

    .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.

    Ось приклад:

    .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.2 s ease-out;
    }
    .bar:hover span {
    opacity: 1;
    }

    При проведенні мишею над стовпцем поле і непрозорість выскакивающего елемента зміняться. Це запускає подія переходу згідно з встановленими нами властивостями. Дуже здорово.

    Завдяки -webkit-transition ми можемо трохи спростити функції свого JavaScript’а:

    //Встановлюємо індивідуальну висоту стовпчиків
    function displayGraph(bars, i) {
    // Змінили спосіб циклічного перегляду з-за проблем з $.each, яке не запускається належним чином
    if (i < bars.length) {
    // Додаємо властивості переходу і за допомогою CSS встановлюємо висоту
    $(bars.bar).css({‘height’: bars.height, ‘-webkit-transition’: ‘all 0.8 s ease-out’});
    // Чекаємо на певний час, потім знову запускаємо функцію displayGraph() для наступного стовпця
    barTimer = setTimeout(function() {
    i++;
    displayGraph(bars, i);
    }, 100);
    }
    }
    // Перезавантажуємо установки діаграми і готуємося до її відображення
    function resetGraph() {
    // Установлюємо висоту стовпця на 0 і очищаємо всі переходи
    $.each(bars, function(i) {
    $(bars.bar).stop().css({‘height’: 0, ‘-webkit-transition’: ‘none’});
    });
    // Очищаємо таймери
    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. Поцілуйте мене!

    Не знаю, що робити з усією цією інформацією. Але попереджаю вас про потенційного неправильному вживанні ваших нових можливостей. Словами нашого друга, Капітана Планета: «Все в твоїй владі!»

    Використовуйте його з розумом.